import ScrollReveal from '@/components/ScrollReveal';

interface Metric {
  value: string;
  unit?: string;
  label: string;
  sub?: string;
}

interface ProductMetricsProps {
  metrics: Metric[];
  note?: string;
}

const ProductMetrics = ({ metrics, note }: ProductMetricsProps) => (
  <section className="bg-foreground py-10 lg:py-14">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-0 divide-x divide-white/10">
          {metrics.map((m, i) => (
            <div key={i} className="flex flex-col items-center text-center px-4 lg:px-8 py-4 lg:py-0">
              <div className="flex items-baseline gap-1 mb-1">
                <span
                  className="font-satoshi font-black text-white leading-none"
                  style={{ fontSize: 'clamp(2rem, 4vw, 3rem)', letterSpacing: '-0.03em' }}
                >
                  {m.value}
                </span>
                {m.unit && (
                  <span className="font-satoshi font-black text-white/40 text-lg leading-none">{m.unit}</span>
                )}
              </div>
              <p className="text-white/50 text-xs font-body uppercase tracking-[0.15em]">{m.label}</p>
              {m.sub && (
                <p className="text-primary/70 text-[10px] font-body mt-0.5">{m.sub}</p>
              )}
            </div>
          ))}
        </div>
        {note && (
          <p className="text-center text-white/25 text-xs font-body mt-6 italic">{note}</p>
        )}
      </ScrollReveal>
    </div>
  </section>
);

export default ProductMetrics;