'use client';

interface StatsCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon?: string;
  trend?: { direction: 'up' | 'down'; percent: number };
  color?: 'blue' | 'green' | 'amber' | 'purple' | 'red' | 'cyan';
  isLoading?: boolean;
}

const COLOR_MAP: Record<string, string> = {
  blue: 'border-blue-500/30 bg-blue-500/5',
  green: 'border-emerald-500/30 bg-emerald-500/5',
  amber: 'border-amber-500/30 bg-amber-500/5',
  purple: 'border-purple-500/30 bg-purple-500/5',
  red: 'border-red-500/30 bg-red-500/5',
  cyan: 'border-cyan-500/30 bg-cyan-500/5',
};

const TEXT_COLOR_MAP: Record<string, string> = {
  blue: 'text-blue-400',
  green: 'text-emerald-400',
  amber: 'text-amber-400',
  purple: 'text-purple-400',
  red: 'text-red-400',
  cyan: 'text-cyan-400',
};

export function ReferralStatsCard({
  title,
  value,
  subtitle,
  trend,
  color = 'blue',
  isLoading = false,
}: StatsCardProps) {
  const formattedValue = typeof value === 'number'
    ? (value % 1 === 0 ? value.toLocaleString() : value.toFixed(2))
    : value;

  return (
    <div
      className={`rounded-xl border p-4 transition-all hover:shadow-lg ${COLOR_MAP[color]}`}
    >
      {isLoading ? (
        <div className="animate-pulse space-y-2">
          <div className="h-3 w-20 rounded bg-white/10" />
          <div className="h-7 w-28 rounded bg-white/10" />
          <div className="h-3 w-16 rounded bg-white/10" />
        </div>
      ) : (
        <>
          <div className="flex items-center justify-between">
            <span className="text-xs font-medium uppercase tracking-wider text-slate-400">
              {title}
            </span>
          </div>
          <div className={`mt-2 text-2xl font-bold ${TEXT_COLOR_MAP[color]}`}>
            {formattedValue}
          </div>
          {subtitle && (
            <div className="mt-1 text-xs text-slate-500">{subtitle}</div>
          )}
          {trend && (
            <div className="mt-2 flex items-center gap-1 text-xs">
              <span className={trend.direction === 'up' ? 'text-emerald-400' : 'text-red-400'}>
                {trend.direction === 'up' ? '↑' : '↓'} {trend.percent}%
              </span>
              <span className="text-slate-500">vs last month</span>
            </div>
          )}
        </>
      )}
    </div>
  );
}