import { cn } from '../../lib/utils';
import type { LucideIcon } from 'lucide-react';

interface StatCardProps {
  title: string;
  value: string | number;
  subtext?: string;
  icon?: LucideIcon;
  iconBgColor?: string;
  iconColor?: string;
  className?: string;
}

export function StatCard({ 
  title, 
  value, 
  subtext, 
  icon: Icon, 
  iconBgColor = 'bg-indigo-50', 
  iconColor = 'text-indigo-600',
  className 
}: StatCardProps) {
  return (
    <div className={cn(
      "bg-white p-5 rounded-2xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow",
      className
    )}>
      <div className="flex justify-between items-start mb-2">
        <h3 className="text-[10px] sm:text-xs font-bold text-slate-500 uppercase tracking-wider">{title}</h3>
        {Icon && (
          <div className={cn("p-2 sm:p-2.5 rounded-xl flex items-center justify-center", iconBgColor, iconColor)}>
            <Icon size={18} strokeWidth={2.5} />
          </div>
        )}
      </div>
      <div className="flex flex-col">
        <span className="text-2xl sm:text-3xl font-black text-slate-900">{value}</span>
        {subtext && <span className="text-xs text-slate-400 mt-1">{subtext}</span>}
      </div>
    </div>
  );
}
