"use client";

import { BadgeEuro } from "lucide-react";
import { formatAmountInputFixed } from "@/lib/amount-input";
import { cn } from "@/lib/utils";

export function CasinoStakeInput({
  label = "Montant du pari",
  value,
  currency,
  disabled = false,
  onChange,
  onHalf,
  onDouble
}: {
  label?: string;
  value: string;
  currency: string;
  disabled?: boolean;
  onChange: (value: string) => void;
  onHalf: () => void;
  onDouble: () => void;
}) {
  return (
    <div data-casino-stake-control="true">
      <div className="mb-1.5 flex items-center justify-between text-[12px] font-bold text-slate-200">
        <span>{label}</span>
        <span className="text-slate-500">{formatAmountInputFixed(value)} {currency}</span>
      </div>
      <div className={cn("flex h-11 overflow-hidden rounded-lg bg-[#202631]", disabled && "opacity-75")}>
        <div className="flex min-w-0 flex-1 items-center gap-2 px-3">
          <span className="grid h-5 w-5 shrink-0 place-items-center rounded-full bg-felt text-ink-950">
            <BadgeEuro className="h-4 w-4 stroke-[2.4]" />
          </span>
          <input
            value={value}
            disabled={disabled}
            onChange={(event) => onChange(event.target.value)}
            inputMode="decimal"
            className="min-w-0 flex-1 border-0 bg-transparent p-0 text-sm font-semibold text-white outline-none placeholder:text-slate-500 focus:ring-0 disabled:text-slate-400"
            placeholder="0,00"
          />
        </div>
        <button onClick={onHalf} disabled={disabled} className="w-[58px] border-l border-black/25 text-xs font-black text-white disabled:text-slate-500 disabled:opacity-50">
          1/2
        </button>
        <button onClick={onDouble} disabled={disabled} className="w-[58px] border-l border-black/25 text-xs font-black text-white disabled:text-slate-500 disabled:opacity-50">
          2x
        </button>
      </div>
    </div>
  );
}