Match Highlight

1"use client"
2 
3import { useEffect, useState } from "react"
4import { ChevronDown, Flag, Square } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { EntityImage } from "@/registry/mrdoge-ui/entity-image/entity-image"
8import { MatchCardCompact, type MatchCardCompactTeam } from "@/registry/mrdoge-ui/match-card-compact/match-card-compact"
9import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "@/components/ui/popover"
10 
11/** Mirrors match.status directly, no "scheduled"/"finished" relabeling. */
12export type MatchHighlightStatus = "upcoming" | "live" | "completed"
13 
14export interface MatchHighlightTeam {
15  name: string
16  logoUrl?: string
17  yellowCards?: number
18  redCards?: number
19  corners?: number
20}
21 
22export interface MatchHighlightClock {
23  /** Finer-grained than the outer `status`, which only has "live", not paused/intermission/interrupted. */
24  state: "scheduled" | "live" | "paused" | "intermission" | "interrupted" | "finished"
25  /** Short label, e.g. "45+2'", "HT", "FT". Used if displayLong is absent. */
26  display?: string | null
27  /** Verbose label meant for a detail header, e.g. "Half-time", "Full Time", "2nd Half". Preferred over `display`. */
28  displayLong?: string | null
29  /** Seconds elapsed as of `referenceTime`, paired together to tick a live timer client-side. Without both, falls back to `displayLong`/`display` as a static label. */
30  elapsedSeconds?: number | null
31  referenceTime?: string | null
32  /** Running match minute (soccer), already capped at the phase max. `null` for sports without one. */
33  minute?: number | null
34  /** Stoppage/injury-time overflow in minutes, e.g. `3` for "45+3'". Soccer only. */
35  stoppage?: number | null
36}
37 
38export interface MatchHighlightRegion {
39  name: string
40  logoUrl?: string
41}
42 
43export interface MatchHighlightCompetitionMatch {
44  id: string
45  home: MatchCardCompactTeam
46  away: MatchCardCompactTeam
47  /** Pre-formatted, e.g. "2-1" or "18:00": whatever's meaningful for that match's own status. */
48  info?: string
49}
50 
51export interface MatchHighlightDataProps {
52  loading?: false
53  status: MatchHighlightStatus
54  competition?: string
55  /** Shown to the left of `competition`. Omit to render the name with no flag. */
56  region?: MatchHighlightRegion
57  /**
58   * Other matches today in the same competition. Pass together with
59   * `onOpenCompetitionMatches` to turn the competition name into a
60   * dropdown; omit either and it renders as plain, non-interactive text.
61// … truncated