/**
 * Сетка карточек статистики. Переиспользуется для всех ролей.
 */

'use client';

import React from 'react';
import { StatCard } from '../StatCard';

export interface StatsGridItem {
  title: string;
  value: string | number;
  icon?: React.ReactNode;
  trend?: { value: number; isPositive: boolean };
  subtitle?: string;
  loading?: boolean;
}

export interface StatsGridProps {
  items: StatsGridItem[];
}

export const StatsGrid: React.FC<StatsGridProps> = ({ items }) => {
  return (
    <div
      style={{
        display: 'grid',
        // Для дашборда ментора: 4 карточки в один ряд,
        // чтобы верхняя строка занимала всю ширину.
        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
        gap: 'var(--ios26-spacing)',
      }}
    >
      {items.map((item, i) => (
        <StatCard
          key={i}
          title={item.title}
          value={item.value}
          icon={item.icon}
          trend={item.trend}
          subtitle={item.subtitle}
          loading={item.loading}
        />
      ))}
    </div>
  );
};