"use client"

import { useState } from "react"

export function CheckYourBet() {
  const [betId, setBetId] = useState("")
  const [result, setResult] = useState<null | "pending" | "won" | "lost">(null)

  const handleCheck = () => {
    if (!betId.trim()) return
    // Mock result
    const results = ["pending", "won", "lost"] as const
    setResult(results[Math.floor(Math.random() * results.length)])
  }

  return (
    <div className="bg-transparent border-t border-border/20 pt-4 pb-2">
      <div className="px-1 text-center space-y-3">
        <h3 className="text-[12px] font-bold uppercase text-brand-primary">Check Your Bet</h3>
        <p className="text-[11px] text-white">Your bet ID</p>
        <div className="flex gap-1">
          <input
            type="text"
            value={betId}
            onChange={(e) => setBetId(e.target.value)}
            className="flex-1 bg-brand-bg border border-border/40 px-2 py-2 text-[11px] text-white outline-none focus:border-brand-primary"
            onKeyDown={(e) => e.key === "Enter" && handleCheck()}
          />
          <button
            onClick={handleCheck}
             className="bg-brand-primary text-black px-2 py-1.5 flex items-center justify-center min-w-[32px] hover:bg-brand-primary-hover transition-colors"
          >
            <svg viewBox="0 0 24 24" className="size-5 fill-current"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
          </button>
        </div>
        {result && (
          <div className={`text-[11px] font-semibold p-2 rounded text-center mt-2 ${
            result === "won" ? "bg-primary/20 text-primary" :
            result === "lost" ? "bg-destructive/20 text-destructive" :
            "bg-secondary text-muted-foreground"
          }`}>
            {result === "won" && "🎉 Bet Won!"}
            {result === "lost" && "❌ Bet Lost"}
            {result === "pending" && "⏳ Bet Pending"}
          </div>
        )}
      </div>
    </div>
  )
}