Odds Selector

1"use client"
2 
3import { useState } from "react"
4import { ChevronDown, LayoutGrid, SlidersHorizontal } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Button } from "@/components/ui/button"
7 
8export type OddsMovement = "up" | "down" | "flat"
9 
10export interface OddsOption {
11  id: string
12  /** Selection label, e.g. "1", "X", "2" or a team name / "Draw". */
13  label: string
14  /** Formatted price, e.g. "1.85". */
15  price: string
16  movement?: OddsMovement
17  suspended?: boolean
18}
19 
20/**
21 * One market rendered as a two-column row, e.g. Over/Under at a single
22 * goal threshold. Use `lines` (a market per row) instead of `options` (a
23 * flat row of a single market) for bet types that post one market per
24 * line: see the "Multiple Lines" example.
25 */
26export interface OddsLine {
27  id: string
28  /** Short label for the line itself, e.g. "2.5". Shown above the slider in slider view. Omit if there's no natural short label. */
29  label?: string
30  over: OddsOption
31  under: OddsOption
32}
33 
34export interface OddsSelectorProps {
35  /** Market name shown as a header above the options, e.g. "Match Result". Omit to render just the options. */
36  label?: string
37  /** A single market's selections, laid out in one row. Ignored when `lines` is set. */
38  options?: OddsOption[]
39  /** Id of the currently selected option, for `options` mode. */
40  selectedId?: string
41  /** Called with the pressed option's id, or `undefined` when pressing the already-selected option deselects it. For `options` mode. */
42  onSelect?: (id: string | undefined) => void
43  /** Several markets, one per row, e.g. every Over/Under goal threshold stacked in one card. Takes over `options` when set. */
44  lines?: OddsLine[]
45  /** Ids of every currently selected option across `lines`. Unlike `options`, more than one row can be selected at once. */
46  selectedLineIds?: string[]
47  /** Called with a pressed option's id and the resulting selected state (not a bare toggle), for `lines` mode. */
48  onSelectLine?: (id: string, selected: boolean) => void
49  /**
50   * Ids that render as unavailable, e.g. because they're logically
51   * incompatible with the current selection. Applies to both `options`
52   * and `lines`. Computed externally (e.g. via a conflict adapter) and
53   * passed in; OddsSelector never decides this itself. Unlike
54   * `suspended`, a disabled option still shows its real price: it's
55   * fully priced and available, just not currently combinable.
56   */
57  disabledIds?: string[]
58// … truncated