import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = [
  { id: "today", label: "Today Events" },
  { id: "upcoming", label: "Upcoming Events" },
  { id: "most-played", label: "Most Played" },
  { id: "top-occurrences", label: "Top Occurrences" },
]

export function HomeTabs() {
  return (
    <div className="flex flex-col">
      <Tabs defaultValue="today" className="w-full">
        <TabsList variant="hs-home">
          {tabs.map((tab) => (
            <TabsTrigger key={tab.id} value={tab.id}>
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
    </div>
  )
}