import React from 'react'
import { Card, CardContent } from './ui/card'

function formatNumber(n: number) {
  return new Intl.NumberFormat('fr-FR').format(n)
}

export default function KpiStrip({ metrics }: { metrics: { label: string; value: number; delta?: number }[] }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
      {metrics.map((m) => (
        <Card key={m.label}>
          <CardContent>
            <div className="text-xs text-slate-500 dark:text-slate-300">{m.label}</div>
            <div className="text-2xl font-semibold">{formatNumber(m.value)}</div>
            {m.delta !== undefined && (
              <div className={(m.delta >= 0 ? 'text-emerald-600' : 'text-rose-600') + ' text-xs'}>
                {m.delta >= 0 ? `+${(m.delta * 100).toFixed(1)}%` : `${(m.delta * 100).toFixed(1)}%`}
              </div>
            )}
          </CardContent>
        </Card>
      ))}
    </div>
  )
}