'use client';

type Props = {
  playerName: string;
  metricLabel: string;
  line: number;
  overProbability: number;
  impliedProb: number;
  edgePercent: number;
  topEdge: boolean;
};

function percent(value: number): string {
  return `${(value * 100).toFixed(1)}%`;
}

export function PropValueCard({
  playerName,
  metricLabel,
  line,
  overProbability,
  impliedProb,
  edgePercent,
  topEdge,
}: Props) {
  return (
    <article className={`panel-glow rounded-2xl border p-4 ${topEdge ? 'prop-top-edge' : ''}`}>
      <p className="dot-matrix text-sm text-[#7d2a15]">{playerName} · {metricLabel}</p>
      <h4 className="mt-1 text-2xl font-semibold text-[#7d2a15]">{line.toFixed(1)} 道具盤</h4>
      <div className="mt-3 space-y-1 text-sm text-[#7a5b46]">
        <p>模型預測 Over 機率：{percent(overProbability)}</p>
        <p>莊家基準線隱含機率：{percent(impliedProb)}</p>
        <p>價值優勢：{edgePercent > 0 ? '+' : ''}{edgePercent.toFixed(1)}%</p>
      </div>
      {topEdge ? (
        <p className="mt-3 rounded-lg bg-[#f5c6b4]/60 p-2 text-xs text-[#8a2e17] dot-matrix">
          極佳投注價值（Top Edge）：預測機率高於市場定價，建議納入進階池列管。
        </p>
      ) : (
        <p className="mt-3 text-xs text-[#6f4f3c]">目前未到達極佳邊際門檻，建議依整體單場風險控管配置。</p>
      )}
    </article>
  );
}