interface Props {
  model: string;
  signal?: 'buy' | 'sell' | 'hold';
  confidence?: number;
  predictedReturn?: number;
}

export function ModelCard({ model, signal, confidence, predictedReturn }: Props) {
  const signalColor = {
    buy: 'text-[var(--color-green)]',
    sell: 'text-[var(--color-red)]',
    hold: 'text-[var(--color-yellow)]',
  }[signal ?? 'hold'];

  const signalBg = {
    buy: 'bg-green-500/10',
    sell: 'bg-red-500/10',
    hold: 'bg-yellow-500/10',
  }[signal ?? 'hold'];

  return (
    <div className="p-3 space-y-2">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium">{model}</span>
        <span className={`text-xs px-2 py-0.5 rounded ${signalColor} ${signalBg}`}>
          {signal?.toUpperCase() ?? 'N/A'}
        </span>
      </div>

      <div className="space-y-1">
        <div className="flex justify-between text-xs">
          <span className="text-[var(--color-text-secondary)]">Confidence</span>
          <span>{confidence !== undefined ? `${(confidence * 100).toFixed(1)}%` : '--'}</span>
        </div>
        <div className="w-full bg-[var(--color-bg-primary)] rounded-full h-1.5">
          <div
            className="h-1.5 rounded-full bg-[var(--color-accent)]"
            style={{ width: `${(confidence ?? 0) * 100}%` }}
          />
        </div>
      </div>

      <div className="flex justify-between text-xs">
        <span className="text-[var(--color-text-secondary)]">Predicted Return</span>
        <span
          className={
            (predictedReturn ?? 0) >= 0
              ? 'text-[var(--color-green)]'
              : 'text-[var(--color-red)]'
          }
        >
          {predictedReturn !== undefined
            ? `${predictedReturn >= 0 ? '+' : ''}${(predictedReturn * 100).toFixed(2)}%`
            : '--'}
        </span>
      </div>
    </div>
  );
}
