Bet Slip

1"use client"
2 
3import { Check, CheckCircle2, Circle, Layers, Loader2, MinusCircle, Ticket, TriangleAlert, X, XCircle } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6import { Button } from "@/components/ui/button"
7import { Input } from "@/components/ui/input"
8import { MatchCardCompact } from "@/registry/mrdoge-ui/match-card-compact/match-card-compact"
9 
10export interface BetSlipPick {
11  id: string
12  eventLabel: string
13  market: string
14  selection: string
15  /** Decimal odds, e.g. 1.85. */
16  price: number
17  /** Colors the price: "down" (shortening, more likely) green, "up" (drifting, less likely) red. Static here; for live data, see useOddsMovement. */
18  movement?: "up" | "down" | "flat"
19  /** True once the underlying line is no longer available. Dims the row and disables nothing else; removal stays a user action. */
20  unavailable?: boolean
21  /** Shown once per match group via BetSlipMatchGroup when both are present. */
22  home?: { name: string; logoUrl?: string }
23  away?: { name: string; logoUrl?: string }
24  /** Shown right-aligned in the match group header via BetSlipMatchGroup, e.g. "Aug 9". */
25  kickoff?: Date | string
26  /** Match id, required (with betType/code) for conflict-checking via the Conflict Adapter, and to group picks from the same match together. */
27  matchId?: string
28  /** Market sysname, e.g. "SOCCER_MATCH_RESULT". */
29  betType?: string
30  /** Outcome code, e.g. "1", "1X", "O". */
31  code?: string
32  /** Parsed Over/Under threshold, when applicable. */
33  threshold?: number
34}
35 
36export interface BetSlipProps {
37  picks: BetSlipPick[]
38  onRemovePick?: (id: string) => void
39  /** "single" (default) treats every pick independently. "parlay" combines them into one bet with a combined price. Only switchable once there are 2+ picks: same as sportsbooks, a parlay needs 2 legs. */
40  mode?: "single" | "parlay"
41  onModeChange?: (mode: "single" | "parlay") => void
42  /** Parlay mode's combined stake. Controlled: BetSlip holds no state of its own. Renders (with a combined payout) only when onStakeChange is passed and mode is "parlay". */
43  stake?: string
44  onStakeChange?: (value: string) => void
45  /** Single mode's stakes, one per pick, keyed by pick id. Rendered as its own input below each pick row; the footer becomes a read-only "Total stake" + "Potential payout" sum once onPickStakeChange is passed and mode is "single". */
46  pickStakes?: Record<string, string>
47  onPickStakeChange?: (id: string, value: string) => void
48// … truncated