import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useBetslipStore } from "@/lib/store/betslip-store"

const mockEvents = [
  {
    id: "1",
    sport: "Soccer",
    name: "Team A vs Team B",
    markets: [
      { id: "1x2_home", label: "1", odds: 1.85 },
      { id: "1x2_draw", label: "X", odds: 3.4 },
      { id: "1x2_away", label: "2", odds: 4.1 },
    ],
  },
  {
    id: "2",
    sport: "Basketball",
    name: "City Wolves vs Lake Bears",
    markets: [
      { id: "spread_home", label: "Home -4.5", odds: 1.9 },
      { id: "spread_away", label: "Away +4.5", odds: 1.9 },
    ],
  },
]

export function EventsList() {
  const { addBet } = useBetslipStore()

  return (
    <Card className="flex-1">
      <CardContent className="px-0 pb-4 pt-3">
        <ScrollArea className="h-[360px]">
          <div className="space-y-2 px-3 pb-2">
            {mockEvents.map((event) => (
              <div
                key={event.id}
                className="rounded-md border bg-card/50 p-2 text-xs"
              >
                <div className="flex items-center justify-between">
                  <div>
                    <div className="font-medium">{event.name}</div>
                    <div className="text-[11px] text-muted-foreground">
                      {event.sport}
                    </div>
                  </div>
                </div>
                <div className="mt-2 flex flex-wrap gap-1.5">
                  {event.markets.map((market) => (
                    <Button
                      key={market.id}
                      size="xs"
                      className="min-w-[60px] justify-between rounded-sm bg-secondary text-secondary-foreground text-[11px] hover:bg-primary hover:text-primary-foreground"
                      onClick={() =>
                        addBet({
                          id: `${event.id}-${market.id}`,
                          event: event.name,
                          market: event.sport,
                          selection: market.label,
                          odds: market.odds,
                        })
                      }
                    >
                      <span>{market.label}</span>
                      <span className="font-semibold">
                        {market.odds.toFixed(2)}
                      </span>
                    </Button>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  )
}