'use client'

import clsx from 'clsx'

export type HuntTab = 'sniper' | 'trends' | 'forge'

export function HuntStrategyChips({
  tab,
  onChange,
}: {
  tab: HuntTab
  onChange: (tab: HuntTab) => void
}) {
  const chips: Array<{ key: HuntTab; label: string; hint: string }> = [
    { key: 'sniper', label: 'THE SNIPER', hint: 'Closeouts < $10 · 5y+ · backlinks' },
    { key: 'trends', label: 'TREND SURFER', hint: 'Trends + keyword availability + typos' },
    { key: 'forge', label: 'BRANDABLE FORGE', hint: 'Generate pronounceables + check availability' },
  ]

  return (
    <div className="flex flex-wrap gap-2">
      {chips.map((c) => {
        const active = tab === c.key
        return (
          <button
            key={c.key}
            onClick={() => onChange(c.key)}
            className={clsx(
              'px-3 py-2 border text-left transition-colors',
              active ? 'border-accent/30 bg-accent/10 text-accent' : 'border-white/10 text-white/50 hover:text-white hover:bg-white/5'
            )}
          >
            <div className="text-[10px] font-bold uppercase tracking-wider font-mono">{c.label}</div>
            <div className="text-[10px] font-mono mt-0.5 text-white/30">{c.hint}</div>
          </button>
        )
      })}
    </div>
  )
}

