'use client';

import { Info } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { PIPELINE_STAGES, STAGE_LABELS, stageDotClass, type PipelineStage } from '@/lib/constants';

/**
 * Small popover that decodes the colored stripe on each interest card to
 * the pipeline stage it represents. The stripe colors come from
 * `STAGE_DOT` in `lib/constants.ts`; if that map changes, this legend
 * stays in sync because both read from the same source.
 */
export function StageLegend() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className="h-8 gap-1.5 text-muted-foreground"
          aria-label="What do the colors mean?"
        >
          <Info className="h-3.5 w-3.5" aria-hidden />
          <span className="hidden sm:inline">Legend</span>
        </Button>
      </PopoverTrigger>
      <PopoverContent align="start" className="w-64 p-3">
        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
          Pipeline stage colors
        </p>
        <ul className="space-y-1.5">
          {PIPELINE_STAGES.map((stage: PipelineStage) => (
            <li key={stage} className="flex items-center gap-2 text-sm">
              <span
                aria-hidden
                className={`inline-block h-2.5 w-2.5 shrink-0 rounded-full ${stageDotClass(stage)}`}
              />
              <span>{STAGE_LABELS[stage]}</span>
            </li>
          ))}
        </ul>
      </PopoverContent>
    </Popover>
  );
}
