export default function MetricsRow({ metrics, loading }) {
  if (loading) return (
    <div className="metrics-row">
      {[0,1,2,3].map(i => <div key={i} className="metric-card skeleton" style={{height:72}} />)}
    </div>
  );
  if (!metrics) return null;

  const { current, deltas } = metrics;

  const cards = [
    { label: 'Organic clicks', value: Number(current.clicks).toLocaleString(), delta: deltas.clicks !== null ? `${deltas.clicks > 0 ? '+' : ''}${deltas.clicks}%` : null, up: parseFloat(deltas.clicks) > 0 },
    { label: 'Impressions', value: current.impressions > 999 ? (current.impressions/1000).toFixed(0)+'K' : current.impressions, delta: deltas.impressions !== null ? `${deltas.impressions > 0 ? '+' : ''}${deltas.impressions}%` : null, up: parseFloat(deltas.impressions) > 0 },
    { label: 'Avg. CTR', value: `${current.ctr}%`, delta: deltas.ctr !== null ? `${parseFloat(deltas.ctr) > 0 ? '+' : ''}${deltas.ctr}pp` : null, up: parseFloat(deltas.ctr) > 0 },
    { label: 'Avg. position', value: `#${current.position}`, delta: deltas.position !== null ? `${parseFloat(deltas.position) > 0 ? '↑ ' : '↓ '}${Math.abs(deltas.position)} spots` : null, up: parseFloat(deltas.position) > 0 },
  ];

  return (
    <div className="metrics-row">
      {cards.map(c => (
        <div key={c.label} className="metric-card">
          <div className="metric-label">{c.label}</div>
          <div className="metric-value">{c.value}</div>
          {c.delta && <div className={`metric-delta ${c.up ? 'up' : 'dn'}`}>{c.delta} vs prev period</div>}
        </div>
      ))}
    </div>
  );
}
