'use client';

type MoneyFlowBarProps = {
  label: string;
  ticketPct: number;
  handlePct: number;
};

export function MoneyFlowBar({ label, ticketPct, handlePct }: MoneyFlowBarProps) {
  const alert = handlePct - ticketPct >= 20;

  return (
    <article className="panel-glow rounded-2xl p-4">
      <p className="dot-matrix text-sm text-[#7d2a15]">{label}</p>
      <div className="mt-2">
        <p className="text-xs text-[#8a6b58]">投注筆數：{ticketPct.toFixed(1)}%</p>
        <div className="mt-1 h-3 w-full overflow-hidden rounded-full bg-[#ece0ca]">
          <div
            className="h-full rounded-full bg-[#b68a65]"
            style={{ width: `${Math.min(ticketPct, 100)}%` }}
          />
        </div>
      </div>

      <div className="mt-3">
        <p className="text-xs text-[#8a6b58]">資金占比：{handlePct.toFixed(1)}%</p>
        <div className="mt-1 h-3 w-full overflow-hidden rounded-full bg-[#ece0ca]">
          <div
            className={`h-full rounded-full ${alert ? 'bg-[#d1432d]' : 'bg-[#dcb53b]'}`}
            style={{ width: `${Math.min(handlePct, 100)}%` }}
          />
        </div>
      </div>

      {alert ? (
        <p className="mt-2 text-sm text-[#8c2f2f]">聰明錢警示：資金比例高於票數超過 20%</p>
      ) : (
        <p className="mt-2 text-sm text-[#6f4f3c]">目前無明顯聰明錢偏離</p>
      )}
    </article>
  );
}