import { Link } from '@tanstack/react-router'

interface QuadrantFilterBarProps {
  currentQuadrant: 'alpha' | 'beta' | 'gamma' | 'delta' | 'all'
}

export function QuadrantFilterBar({ currentQuadrant }: QuadrantFilterBarProps) {
  const tabs = [
    { id: 'all', label: 'ALL FEEDS' },
    { id: 'alpha', label: 'α ALPHA' },
    { id: 'beta', label: 'β BETA' },
    { id: 'gamma', label: 'γ GAMMA' },
    { id: 'delta', label: 'δ DELTA' },
  ] as const

  return (
    <div className="flex gap-1.5 border border-slate-900 p-1.5 bg-slate-950/20 font-mono text-xs select-none w-full">
      {tabs.map((tab) => (
        <Link
          key={tab.id}
          to="."
          search={(prev: any) => ({ ...prev, quadrant: tab.id })}
          className={`flex-1 text-center py-1.5 border font-bold uppercase transition-all cursor-pointer ${
            currentQuadrant === tab.id
              ? 'border-emerald-500/50 text-emerald-400 bg-emerald-950/20'
              : 'border-slate-950 text-slate-500 hover:text-slate-400 hover:border-slate-800 bg-black/40'
          }`}
        >
          {tab.label}
        </Link>
      ))}
    </div>
  )
}
