"use client";

interface StatData {
  label: string;
  value: string;
  change: string;
  isPositive: boolean;
}

interface StatsCardsProps {
  stats?: StatData[];
  cols?: 4 | 5;
}

const COLS_CLASS: Record<number, string> = {
  4: "grid grid-cols-2 md:grid-cols-4 gap-4",
  5: "grid grid-cols-2 md:grid-cols-5 gap-4",
};

export default function StatsCards({ stats = [], cols }: StatsCardsProps) {
  if (!stats || stats.length === 0) return null;

  const gridClass = COLS_CLASS[cols ?? stats.length] ?? COLS_CLASS[4];

  return (
    <div className={gridClass}>
      {stats.map((stat, index) => (
        <div
          key={index}
          className="flex flex-col gap-2 items-start justify-start
            bg-[#f9fafb] dark:bg-gray-800
            border border-[#f3f4f6] dark:border-gray-700
            rounded-2xl p-4"
        >
          {/* Label */}
          <div
            className="text-[#9ca1af] dark:text-gray-400"
            style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, lineHeight: '150%', letterSpacing: '0.01em' }}
          >
            {stat.label}
          </div>

          {/* Value */}
          <div
            className="text-[#111827] dark:text-white truncate w-full"
            style={{ fontFamily: 'Inter, sans-serif', fontSize: 24, fontWeight: 700, lineHeight: '130%', letterSpacing: '-0.005em' }}
            title={stat.value}
          >
            {stat.value}
          </div>

          {/* Change indicator */}
          {stat.change ? (
            <div
              style={{
                fontFamily: 'Inter, sans-serif',
                fontSize: 12,
                fontWeight: 500,
                lineHeight: '150%',
                letterSpacing: '0.01em',
                color: stat.isPositive ? '#10b981' : '#ef4444',
              }}
            >
              {stat.change}
            </div>
          ) : (
            <div style={{ height: 18 }} />
          )}
        </div>
      ))}
    </div>
  );
}