import { motion } from 'framer-motion';
import type { LucideIcon } from 'lucide-react';
import clsx from 'clsx';

interface StatsCardProps {
  title: string;
  value: string | number;
  icon: LucideIcon;
  trend?: {
    value: number;
    isUp: boolean;
  };
  color: 'blue' | 'purple' | 'emerald' | 'amber' | 'rose';
  delay?: number;
}

const colorMap = {
  blue: 'from-blue-500/10 to-blue-600/10 text-blue-600 border-blue-200/50',
  purple: 'from-purple-500/10 to-purple-600/10 text-purple-600 border-purple-200/50',
  emerald: 'from-emerald-500/10 to-emerald-600/10 text-emerald-600 border-emerald-200/50',
  amber: 'from-amber-500/10 to-amber-600/10 text-amber-600 border-amber-200/50',
  rose: 'from-rose-500/10 to-rose-600/10 text-rose-600 border-rose-200/50',
};

export default function StatsCard({ title, value, icon: Icon, trend, color, delay = 0 }: StatsCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay }}
      className={clsx(
        "relative overflow-hidden rounded-2xl border bg-white/50 backdrop-blur-xl p-6 shadow-sm transition-all hover:shadow-md",
        colorMap[color]
      )}
    >
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-slate-500">{title}</p>
          <h3 className="mt-1 text-3xl font-bold tracking-tight text-slate-900">{value}</h3>

          {trend && (
            <div className={clsx(
              "mt-2 flex items-center text-xs font-semibold",
              trend.isUp ? "text-emerald-600" : "text-rose-600"
            )}>
              {trend.isUp ? '↑' : '↓'} {Math.abs(trend.value)}%
              <span className="ml-1 font-normal text-slate-400">vs mes anterior</span>
            </div>
          )}
        </div>

        <div className={clsx(
          "flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br shadow-inner",
          colorMap[color]
        )}>
          <Icon size={24} />
        </div>
      </div>

      {/* Elemento decorativo de fondo */}
      <div className="absolute -bottom-6 -right-6 h-24 w-24 rounded-full bg-current opacity-[0.03]" />
    </motion.div>
  );
}
