import { BookOpen, Clock, Brain, Eye } from 'lucide-react';

function StatCard({ icon: Icon, value, label }) {
  return (
    <div className="article-card flex items-center gap-4 p-5">
      <div
        className="w-11 h-11 rounded-lg flex items-center justify-center flex-shrink-0"
        style={{ background: 'rgb(var(--accent) / 0.1)' }}
      >
        <Icon className="w-5 h-5 accent" />
      </div>
      <div className="min-w-0">
        <div className="text-2xl font-bold ink leading-none mb-1 tabular-nums">{value}</div>
        <div className="text-xs mute uppercase tracking-wider">{label}</div>
      </div>
    </div>
  );
}

function fmt(n) {
  if (!n) return '0';
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
  return n.toLocaleString('ru-RU');
}

export default function Stats({ data }) {
  if (!data) return null;
  return (
    <section className="container-wide pb-12">
      <h2 className="text-sm font-medium uppercase tracking-widest mute mb-5">
        Что уже написал ИИ
      </h2>
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard icon={BookOpen} value={fmt(data.articles_count)} label="статей" />
        <StatCard icon={Clock} value={fmt(data.total_reading_min)} label="минут чтения" />
        <StatCard icon={Brain} value={fmt(data.tokens_out)} label="токенов сгенерировано" />
        <StatCard icon={Eye} value={fmt(data.total_views)} label="просмотров" />
      </div>
    </section>
  );
}