import React from 'react';

interface StatItem {
  key: string;
  label: string;
  value: string | number;
  icon?: React.ReactNode;
  hint?: string;
}

interface StatCarouselProps {
  items: StatItem[];
}

export function StatCarousel({ items }: StatCarouselProps) {
  return (
    <div className="-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-2 sm:mx-0 sm:grid sm:snap-none sm:overflow-visible sm:px-0 sm:pb-0 sm:grid-cols-2 lg:grid-cols-4">
      {items.map((item) => (
        <div key={item.key} className="min-w-[70%] snap-center sm:min-w-0">
          <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
            <div className="flex items-center justify-between">
              <span className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{item.label}</span>
              {item.icon ? <span className="text-rose-500 dark:text-rose-200">{item.icon}</span> : null}
            </div>
            <div className="mt-3 text-2xl font-semibold text-slate-900 dark:text-white">{item.value}</div>
            {item.hint ? (
              <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">{item.hint}</p>
            ) : null}
          </div>
        </div>
      ))}
    </div>
  );
}