import Link from "next/link";
import { usd } from "@/lib/format";
import type { DashboardSummary } from "@/lib/types";
import { ConfidenceBar, DirectionBadge, RiskBadge } from "./Badge";
import Sparkline from "./Sparkline";

type TopSignal = DashboardSummary["top_signals"][number];

export default function SignalCard({ signal }: { signal: TopSignal }) {
  return (
    <Link href={`/signals/${signal.id}`} className="card p-4 block hover:border-ink-600 transition-colors">
      <div className="flex items-start justify-between">
        <div>
          <div className="flex items-center gap-2">
            <span className="font-semibold text-slate-100">{signal.symbol}</span>
            <DirectionBadge direction={signal.direction} />
          </div>
          <div className="text-xs text-slate-500 mt-0.5 truncate max-w-[160px]">{signal.company}</div>
        </div>
        <Sparkline data={signal.history} width={90} height={30} />
      </div>
      <div className="mt-3 space-y-2">
        <ConfidenceBar value={signal.confidence} />
        <div className="flex items-center justify-between text-xs text-slate-400">
          <span>Entry <span className="font-mono text-slate-200">{usd(signal.entry)}</span></span>
          <span>P(win) <span className="font-mono text-slate-200">{signal.probability.toFixed(0)}%</span></span>
          <span>R:R <span className="font-mono text-slate-200">{signal.risk_reward.toFixed(1)}</span></span>
        </div>
        <RiskBadge rating={signal.risk_rating} />
      </div>
    </Link>
  );
}