import { BarChart, Bar, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import type { OHLCVDataPoint } from '@/lib/types';
import { getChartColors } from '../utils/chart-colors';
import { formatCompactCurrency } from '@/lib/format';

type VolumeIndicatorProps = {
  data: OHLCVDataPoint[];
  height?: number;
  formatters?: {
    volume?: (value: number) => string;
  };
};

export function VolumeIndicator({
  data,
  height = 80,
  formatters
}: VolumeIndicatorProps) {
  const colors = getChartColors();
  if (data.length === 0) return null;

  const formatVolume = formatters?.volume || formatCompactCurrency;

  return (
    <div style={{ height: `${height}px`, width: '100%' }} className="mt-2">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data}>
          <YAxis
            orientation="right"
            tickFormatter={formatVolume}
            stroke={colors.muted}
            fontSize={10}
            width={60}
          />
          <Tooltip
            formatter={(value) => [
              formatVolume(typeof value === 'number' ? value : Number(value ?? 0)),
              'Volume'
            ]}
            labelFormatter={(label) => `Date: ${label}`}
            contentStyle={{
              backgroundColor: colors.tooltipBg,
              border: `1px solid ${colors.tooltipBorder}`,
              borderRadius: '0.75rem',
              fontSize: '0.75rem'
            }}
          />
          <Bar
            dataKey="volume"
            fill={colors.volume}
            opacity={0.3}
            isAnimationActive={data.length <= 500}
          />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}