import { ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"

const topMatches = [
  {
    id: "tm1",
    league: "England - Premier League",
    time: "05:00 PM",
    homeTeam: "Nottingham Forest",
    awayTeam: "Liverpool",
    odds: { home: 4.09, draw: 3.93, away: 1.82 }
  },
  {
    id: "tm2",
    league: "England - Premier League",
    time: "11:00 PM",
    homeTeam: "Man City",
    awayTeam: "Newcastle",
    odds: { home: 1.50, draw: 5.17, away: 5.93 }
  },
  {
    id: "tm3",
    league: "England - Premier League",
    time: "06:00 PM",
    homeTeam: "Chelsea",
    awayTeam: "Burnley",
    odds: { home: 1.21, draw: 6.91, away: 11.50 }
  },
  {
    id: "tm4",
    league: "Spain - LaLiga",
    time: "07:30 PM",
    homeTeam: "Arsenal",
    awayTeam: "Wolves",
    odds: { home: 1.56, draw: 4.16, away: 5.80 }
  },
  {
    id: "tm5",
    league: "Italy - Serie A",
    time: "09:45 PM",
    homeTeam: "Inter Milan",
    awayTeam: "Napoli",
    odds: { home: 1.85, draw: 3.60, away: 4.20 }
  }
]

export function TopMatches() {
  return (
    <div className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide -mx-1 px-1">
      {topMatches.map((match) => (
        <div 
          key={match.id} 
          className="min-w-[280px] bg-[#222] border border-border/20 rounded-sm overflow-hidden flex flex-col relative group"
        >
          {/* Top Label Ribbon */}
          <div className="absolute top-0 right-0 w-12 h-12 overflow-hidden z-10 pointer-events-none">
            <div className="absolute top-[6px] right-[-14px] bg-[#ff9800] text-black text-[8px] font-black py-0.5 px-6 rotate-45 shadow-sm uppercase tracking-tighter">
              TOP
            </div>
          </div>

          <div className="bg-[#1a1a1a] px-3 py-1.5 flex items-center justify-between text-[10px] text-muted-foreground border-b border-border/10">
            <div className="flex items-center gap-1">
              <span className="font-bold text-[#ff9800]">{match.league}</span>
              <span className="font-black text-white ml-1 italic">{match.time}</span>
            </div>
            <ChevronRight className="size-3 text-white/20 mr-4" />
          </div>

          <div className="p-3 flex flex-col gap-3">
             <div className="flex items-center justify-between gap-1">
                <div className="flex items-center gap-2 flex-1 min-w-0">
                   <div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
                   <span className="text-[11px] font-black text-white truncate uppercase italic">{match.homeTeam}</span>
                </div>
                <span className="text-[#ff9800] text-[9.5px] font-black italic shrink-0 px-2 opacity-60">VS</span>
                <div className="flex items-center gap-2 flex-1 min-w-0 justify-end">
                   <span className="text-[11px] font-black text-white truncate uppercase italic text-right">{match.awayTeam}</span>
                   <div className="size-4 shrink-0 bg-white/5 rounded-sm flex items-center justify-center text-[9px] border border-white/10">⚽</div>
                </div>
             </div>
          </div>

          <div className="grid grid-cols-3 gap-[1px] bg-white/5 mx-2 mb-2 rounded-sm overflow-hidden border border-white/5">
             <button className="bg-[#1a1a1a] hover:bg-[#333] flex items-center justify-between px-2.5 py-1.5 transition-colors group/btn">
                <span className="text-[10px] font-black text-white/40 group-hover/btn:text-white">1</span>
                <span className="text-[11px] font-black text-[#ff9800] tabular-nums">{match.odds.home.toFixed(2)}</span>
             </button>
             <button className="bg-[#1a1a1a] hover:bg-[#333] flex items-center justify-between px-2.5 py-1.5 transition-colors border-x border-white/5 group/btn">
                <span className="text-[10px] font-black text-white/40 group-hover/btn:text-white">X</span>
                <span className="text-[11px] font-black text-[#ff9800] tabular-nums">{match.odds.draw.toFixed(2)}</span>
             </button>
             <button className="bg-[#1a1a1a] hover:bg-[#333] flex items-center justify-between px-2.5 py-1.5 transition-colors group/btn">
                <span className="text-[10px] font-black text-white/40 group-hover/btn:text-white">2</span>
                <span className="text-[11px] font-black text-[#ff9800] tabular-nums">{match.odds.away.toFixed(2)}</span>
             </button>
          </div>
        </div>
      ))}
    </div>
  )
}