'use client';

import type { StatCard } from './mockData';

const colorMap: Record<string, string> = {
  default: 'text-foreground',
  green: 'text-green-600',
  blue: 'text-blue-600',
  red: 'text-red-600',
  orange: 'text-orange-600',
};

const bgMap: Record<string, string> = {
  default: 'bg-card border',
  green: 'bg-green-50 border-green-200',
  blue: 'bg-blue-50 border-blue-200',
  red: 'bg-red-50 border-red-200',
  orange: 'bg-orange-50 border-orange-200',
};

export function StatCards({ stats }: { stats: StatCard[] }) {
  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat, i) => (
        <div key={i} className={`${bgMap[stat.color ?? 'default']} rounded-xl p-4`}>
          <p className="text-xs md:text-sm text-muted-foreground mb-1 whitespace-nowrap">{stat.label}</p>
          <p className={`text-lg md:text-xl font-bold ${colorMap[stat.color ?? 'default']}`}>
            {stat.value}
          </p>
          {stat.change && (
            <p className={`text-xs mt-1 ${stat.changeDirection === 'up' ? 'text-green-500' : 'text-red-500'}`}>
              {stat.change}
            </p>
          )}
        </div>
      ))}
    </div>
  );
}
