// app/components/admin/dashboard/StatCard.tsx
'use client';

import { LucideIcon } from 'lucide-react';

interface StatCardProps {
  title: string;
  value: number;
  icon: LucideIcon;
  color: 'blue' | 'green' | 'orange' | 'purple' | 'red';
  isCurrency?: boolean;
}

const colorIconStyles = {
  blue: 'text-var-primary',
  green: 'text-var-success',
  orange: 'text-var-warning',
  purple: 'text-var-accent-purple',
  red: 'text-var-danger'
};

const colorBgStyles = {
  blue: 'bg-var-primary-muted',
  green: 'bg-var-success-bg',
  orange: 'bg-var-warning-bg',
  purple: 'bg-var-info-bg',
  red: 'bg-var-danger-bg'
};

export default function StatCard({ title, value, icon: Icon, color, isCurrency = false }: StatCardProps) {
  const formatValue = () => {
    if (isCurrency) {
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
      }).format(value);
    }
    return value.toLocaleString();
  };

  return (
    <div className="bg-var-surface rounded-xl shadow-var-card border border-var-border p-6 hover:shadow-var-modal transition-all duration-300">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-var-text-muted mb-1">{title}</p>
          <p className="text-2xl font-bold text-var-text">{formatValue()}</p>
        </div>
        <div className={`p-3 rounded-lg ${colorBgStyles[color]} ${colorIconStyles[color]}`}>
          <Icon className="w-6 h-6" />
        </div>
      </div>
    </div>
  );
}