import { ReferenceLine } from 'recharts';
import type { SRLevel } from '../../lib/types';
import { formatPrice } from '../../lib/format';

interface SROverlayProps {
  levels: SRLevel[];
}

export function SROverlay({ levels }: SROverlayProps) {
  return (
    <>
      {levels.map((level) => {
        const isSupport = level.type === 'support';
        return (
          <ReferenceLine
            key={level.id}
            y={level.price_level}
            stroke={isSupport ? '#22c55e' : '#ef4444'}
            strokeDasharray="6 3"
            strokeWidth={1.5}
            label={{
              value: formatPrice(level.price_level),
              position: 'right',
              fill: isSupport ? '#22c55e' : '#ef4444',
              fontSize: 11,
            }}
          />
        );
      })}
    </>
  );
}