"use client";

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

export function EventMarketSelection({
  selection,
  marker
}: {
  selection: SlipSelection;
  marker?: ReactNode;
}) {
  const { selections, addSelection } = useBetSlip();
  const active = selections.some((item) => item.selectionId === selection.selectionId);

  return (
    <button
      type="button"
      onClick={() => addSelection(selection)}
      className={cn(
        "flex min-h-[50px] w-full items-center justify-between gap-3 rounded-md border px-3 py-2.5 text-left transition",
        active
          ? "border-felt bg-felt text-ink-950 shadow-[0_0_18px_rgba(16,224,189,.18)]"
          : "border-white/[0.04] bg-black/70 text-white hover:border-felt/35 hover:bg-black/80"
      )}
    >
      <span className="flex min-w-0 items-center gap-2">
        {marker}
        <span className={cn("truncate text-[13px] font-semibold leading-4", active ? "text-ink-950" : "text-white")}>{selection.selectionName}</span>
      </span>
      <span className={cn("shrink-0 text-[14px] font-extrabold leading-4", active ? "text-ink-950" : "text-felt")}>{formatOdds(selection.odds)}</span>
    </button>
  );
}