import './StatCard.css';

export default function StatCard({ label, value, subtitle, delta, className }) {
  return (
    <div className={`stat-card ${className || ''}`}>
      <div className="stat-label">{label}</div>
      <div className="stat-value">{value}</div>
      {subtitle && <div className="stat-sub">{subtitle}</div>}
      {delta && <div className={`stat-delta ${delta.dir}`}>{delta.text}</div>}
    </div>
  );
}

export function RiskBadge({ level }) {
  const cls = { Low: 'low', Medium: 'med', 'Medium-High': 'mh', High: 'hi', 'Low-Medium': 'low' }[level] || 'low';
  return <span className={`risk-badge ${cls}`}>{level}</span>;
}

export function pct(v) {
  if (v == null || isNaN(v)) return 'N/A';
  return (v > 0 ? '+' : '') + v.toFixed(1) + '%';
}