import { useBetslipStore } from "@/lib/store/betslip-store";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export function Betslip() {
  const { bets, removeBet, clearBets } = useBetslipStore();

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0">
        <CardTitle className="text-sm font-semibold">
          Betslip {bets.length}
        </CardTitle>
        {bets.length > 0 && (
          <button
            onClick={clearBets}
            className="text-xs text-muted-foreground hover:underline"
          >
            Clear all
          </button>
        )}
      </CardHeader>
      <CardContent className="space-y-3 text-xs">
        {bets.length === 0 ? (
          <p className="text-muted-foreground">
            No bet has been selected. To select a bet, please click on the
            respective odds.
          </p>
        ) : (
          <div className="space-y-2">
            {bets.map((bet) => (
              <div
                key={bet.id}
                className="rounded border bg-card/40 p-2 text-xs"
              >
                <div className="flex items-center justify-between">
                  <div>
                    <div className="font-medium">{bet.event}</div>
                    <div className="text-[10px] text-muted-foreground">
                      {bet.market} – {bet.selection}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="font-semibold">{bet.odds.toFixed(2)}</div>
                    <button
                      onClick={() => removeBet(bet.id)}
                      className="text-[10px] text-destructive hover:underline"
                    >
                      Remove
                    </button>
                  </div>
                </div>
              </div>
            ))}
            <Button className="w-full text-xs" size="sm">
              Place bet
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
}