import { BarChart2, PrinterIcon, Trophy } from "lucide-react"

const services = [
  { label: "Live Score", icon: BarChart2 },
  { label: "Results", icon: Trophy },
  { label: "Print Odds", icon: PrinterIcon },
]

export function BetServices() {
  return (
    <div className="flex items-center gap-0 bg-secondary rounded border border-border overflow-hidden text-[11px]">
      <span className="px-3 py-2 font-bold uppercase text-muted-foreground text-[10px] tracking-wider border-r border-border">
        Services
      </span>
      {services.map((service, i) => {
        const Icon = service.icon
        return (
          <button
            key={service.label}
            className={`flex items-center gap-1.5 px-3 py-2 text-muted-foreground hover:text-primary hover:bg-muted transition-colors ${i < services.length - 1 ? "border-r border-border" : ""}`}
          >
            <Icon className="size-3" />
            {service.label}
          </button>
        )
      })}
    </div>
  )
}