/**
 * HeatmapToolbar
 *
 * Shared toolbar with icon toggles + search input for MITRE heatmap views.
 * Used by DetectionTab and ValidationTab.
 */

import { cn } from './utils'
import type { ComponentType } from 'react'
import { Search } from 'lucide-react'

type HeatmapIcon = ComponentType<{ className?: string }>

export interface HeatmapView<T extends string = string> {
  id: T
  label: string
  icon: HeatmapIcon
}

interface HeatmapToolbarProps<T extends string = string> {
  views: HeatmapView<T>[]
  activeView: T
  onViewChange: (view: T) => void
  searchQuery: string
  onSearchChange: (query: string) => void
  searchPlaceholder?: string
}

export function HeatmapToolbar<T extends string = string>({
  views,
  activeView,
  onViewChange,
  searchQuery,
  onSearchChange,
  searchPlaceholder = 'Search techniques...',
}: HeatmapToolbarProps<T>) {
  return (
    <div className="flex items-center gap-3">
      {/* View Toggle */}
      <div className="bg-surface-secondary border-border-glass flex items-center gap-1 rounded-lg border p-1">
        {views.map(view => {
          const Icon = view.icon
          return (
            <button
              key={view.id}
              onClick={() => onViewChange(view.id)}
              className={cn(
                'rounded p-1.5 transition-all',
                activeView === view.id
                  ? 'bg-accent-primary text-white'
                  : 'text-foreground-muted hover:text-foreground hover:bg-surface-tertiary'
              )}
              title={view.label}
            >
              <Icon className="h-4 w-4" />
            </button>
          )
        })}
      </div>

      {/* Search */}
      <div className="relative">
        <Search className="text-foreground-muted absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
        <input
          type="text"
          value={searchQuery}
          onChange={e => onSearchChange(e.target.value)}
          placeholder={searchPlaceholder}
          className={cn(
            'border-border-glass bg-surface-tertiary/50 h-9 w-64 rounded-md border pr-4 pl-10',
            'text-foreground placeholder:text-foreground-muted text-sm',
            'focus:border-accent-primary/50 focus:ring-accent-primary/30 focus:ring-1 focus:outline-none'
          )}
        />
      </div>
    </div>
  )
}
