import { Separator } from "@/components/ui/separator"

const services = ["Live Score", "Results", "Print Odds"]

export function BetServices() {
  return (
    <div className="flex items-center gap-3 rounded-md border bg-card/60 px-3 py-2 text-[11px]">
      <span className="font-medium uppercase tracking-wide text-muted-foreground">
        Bet Services
      </span>
      <Separator orientation="vertical" className="h-4" />
      <div className="flex flex-wrap gap-2">
        {services.map((service) => (
          <button
            key={service}
            className="text-[11px] text-primary underline-offset-2 hover:underline"
          >
            {service}
          </button>
        ))}
      </div>
    </div>
  )
}