"use client";

import { useBetSlip, type SlipSelection } from "@/components/bet-slip";
import { cn, formatOdds } from "@/lib/utils";

export function OddsButton({ selection, compact = false }: { selection: SlipSelection; compact?: boolean }) {
  const { selections, addSelection } = useBetSlip();
  const active = selections.some((item) => item.selectionId === selection.selectionId);

  return (
    <button
      onClick={() => addSelection(selection)}
      className={cn(
        compact ? "min-h-[54px] px-2.5 py-2 text-left" : "min-h-11 px-2.5 py-2 text-left",
        "min-w-0 w-full rounded-md border text-sm transition",
        active
          ? "border-felt bg-felt text-ink-950 shadow-[0_0_18px_rgba(16,224,189,.18)]"
          : "border-white/[0.04] bg-black/55 text-white hover:border-felt/35 hover:bg-black/70"
      )}
    >
      <span className={cn("block truncate text-[11px] font-semibold leading-4", active ? "text-ink-950/80" : "text-white/90")}>{selection.selectionName}</span>
      <span className={cn("mt-0.5 block text-[13px] font-extrabold leading-4", active ? "text-ink-950" : "text-felt")}>{formatOdds(selection.odds)}</span>
    </button>
  );
}