import { Tabs, TabsList, TabsTrigger } 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() {
  return (
    <Tabs defaultValue="football" 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}
            className="flex-col min-w-[70px] py-2 gap-1"
          >
            <span className="text-xl">{sport.icon}</span>
            <span className="text-[10px] font-bold uppercase">{sport.name}</span>
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  )
}