/**
 * HeatmapLegend
 *
 * Shared floating legend for MITRE heatmap views.
 * Displays color-coded items with optional click-to-filter.
 * Used by DetectionTab and ValidationTab.
 */

import { cn } from './utils'

export interface HeatmapLegendItem {
  key: string
  dot: string // Tailwind bg class for the color swatch
  label: string
}

interface HeatmapLegendProps {
  items: HeatmapLegendItem[]
  activeFilter: string | null
  onFilterChange: (key: string | null) => void
}

export function HeatmapLegend({ items, activeFilter, onFilterChange }: HeatmapLegendProps) {
  return (
    <div className="bg-surface-secondary/95 border-border-glass absolute right-4 bottom-4 z-10 rounded-lg border p-3 shadow-lg backdrop-blur-sm">
      <h4 className="text-foreground-muted mb-2 text-xs font-medium tracking-wider uppercase">
        Legend
      </h4>
      <div className="space-y-1.5">
        {items.map(item => {
          const isActive = activeFilter === item.key

          return (
            <button
              key={item.key}
              onClick={() => onFilterChange(isActive ? null : item.key)}
              className={cn(
                'flex w-full items-center gap-2.5 rounded px-2 py-1 text-left transition-all',
                'hover:bg-surface-tertiary/50',
                isActive && 'bg-accent-primary/10 ring-accent-primary/30 ring-1'
              )}
            >
              <div className={cn('h-3.5 w-3.5 flex-shrink-0 rounded-[2px]', item.dot)} />
              <span className="text-foreground-secondary text-xs">{item.label}</span>
            </button>
          )
        })}
      </div>
    </div>
  )
}
