import { formatValue } from '../lib/format';

export default function MapLegend({
  featureLabel,
  range,
  showCancel,
  onCancel,
  mode,
  enumValues,
}: {
  featureLabel: string;
  range: [number, number];
  showCancel: boolean;
  onCancel: () => void;
  mode: 'feature' | 'density';
  enumValues?: string[];
}) {
  const gradientStyle =
    mode === 'density'
      ? 'linear-gradient(to right, rgb(130, 234, 220), rgb(20, 140, 180), rgb(88, 28, 140))'
      : 'linear-gradient(to right, rgb(46, 204, 113), rgb(241, 196, 15), rgb(231, 76, 60), rgb(142, 68, 173))';

  return (
    <div className="absolute top-3 right-3 z-10 bg-white dark:bg-navy-800 dark:text-warm-200 rounded shadow-lg p-3 text-xs min-w-[160px]">
      <div className="flex items-center justify-between mb-2">
        <span className="font-semibold text-sm">{featureLabel}</span>
        {showCancel && (
          <button
            onClick={onCancel}
            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 ml-2"
            title="Clear color view"
          >
            <svg
              className="w-4 h-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              strokeWidth={2}
            >
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        )}
      </div>
      <div className="h-3 rounded" style={{ background: gradientStyle }} />
      <div className="flex justify-between mt-1 text-warm-600 dark:text-warm-400">
        {mode === 'density' ? (
          <>
            <span>Few</span>
            <span>Many</span>
          </>
        ) : enumValues && enumValues.length > 0 ? (
          <>
            <span>{enumValues[0]}</span>
            <span>{enumValues[enumValues.length - 1]}</span>
          </>
        ) : (
          <>
            <span>{formatValue(range[0])}</span>
            <span>{formatValue(range[1])}</span>
          </>
        )}
      </div>
    </div>
  );
}