"use client"

import Link from "next/link"
import { useSearchParams } from "next/navigation"
import { TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Tabs } from "@/components/ui/tabs"

const sports = [
  { id: "football", name: "Football", icon: "⚽" },
  { id: "tennis", name: "Tennis", icon: "🎾" },
  { id: "basketball", name: "Basketball", icon: "🏀" },
  { id: "ice-hockey", name: "Ice Hockey", icon: "🏒" },
  { id: "mma", name: "MMA", icon: "🥋" },
  { id: "handball", name: "Handball", icon: "🤾" },
  { id: "darts", name: "Darts", icon: "🎯" },
  { id: "snooker", name: "Snooker", icon: "🎱" },
  { id: "cricket", name: "Cricket", icon: "🏏" },
  { id: "dota2", name: "Dota 2", icon: "🎮" },
]

export function SportsNav() {
  const searchParams = useSearchParams()
  const currentSport = searchParams.get("sport") ?? "football"

  return (
    <Tabs value={currentSport} className="w-full">
      <TabsList variant="hs-nav" className="min-h-14! h-auto! py-2">
        {sports.map((sport) => (
          <TabsTrigger
            key={sport.id}
            value={sport.id}
            asChild
            className="flex-col min-w-[70px] py-2 gap-1"
          >
            <Link href={`/?sport=${sport.id}`} scroll={false} className="flex flex-col items-center gap-1">
              <span className="text-xl">{sport.icon}</span>
              <span className="text-[10px] font-bold uppercase">{sport.name}</span>
            </Link>
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  )
}