import { useMemo } from 'react';
import type { DepthColorStop } from '../../features/mapSettings/types';

interface DepthLegendProps {
  depthStops: DepthColorStop[];
}

export function DepthLegend({ depthStops }: DepthLegendProps) {
  const sorted = useMemo(
    () => [...depthStops].sort((a, b) => a.depth - b.depth),
    [depthStops],
  );

  const gradient = useMemo(() => {
    if (sorted.length === 0) return 'transparent';
    const stops = sorted.map((s, i) => {
      const pct = (i / (sorted.length - 1)) * 100;
      return `${s.color} ${pct.toFixed(0)}%`;
    });
    return `linear-gradient(to bottom, ${stops.join(', ')})`;
  }, [sorted]);

  return (
    <div className="depth-legend">
      <div className="depth-legend__bar" style={{ background: gradient }} />
      <div className="depth-legend__ticks">
        {sorted.map((s) => (
          <span key={s.depth}>{Math.abs(s.depth).toLocaleString()}m</span>
        ))}
      </div>
    </div>
  );
}