'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';
import { FiTrendingUp, FiTrendingDown, FiMinus } from 'react-icons/fi';

interface StatsCardProps {
  icon: React.ReactNode;
  value: string | number;
  label: string;
  trend?: {
    value: number;
    label: string;
  };
  color?: 'primary' | 'accent' | 'success' | 'warning';
  className?: string;
}

const colorMap = {
  primary: {
    icon: 'bg-primary/10 text-primary',
    glow: 'shadow-primary/5',
    border: 'border-primary/10 hover:border-primary/20',
  },
  accent: {
    icon: 'bg-accent/10 text-accent',
    glow: 'shadow-accent/5',
    border: 'border-accent/10 hover:border-accent/20',
  },
  success: {
    icon: 'bg-green-500/10 text-green-400',
    glow: 'shadow-green-500/5',
    border: 'border-green-500/10 hover:border-green-500/20',
  },
  warning: {
    icon: 'bg-yellow-500/10 text-yellow-400',
    glow: 'shadow-yellow-500/5',
    border: 'border-yellow-500/10 hover:border-yellow-500/20',
  },
};

export default function StatsCard({
  icon,
  value,
  label,
  trend,
  color = 'primary',
  className,
}: StatsCardProps) {
  const colors = colorMap[color];

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ y: -2 }}
      className={cn(
        'glass-card p-5 rounded-xl border transition-all duration-300',
        colors.border,
        `hover:shadow-lg ${colors.glow}`,
        className
      )}
    >
      <div className="flex items-start justify-between">
        <div className={cn('w-11 h-11 rounded-xl flex items-center justify-center', colors.icon)}>
          {icon}
        </div>
        {trend && (
          <div className={cn(
            'flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full',
            trend.value > 0
              ? 'text-green-400 bg-green-400/10'
              : trend.value < 0
              ? 'text-red-400 bg-red-400/10'
              : 'text-white/40 bg-white/5'
          )}>
            {trend.value > 0 ? <FiTrendingUp size={12} /> : trend.value < 0 ? <FiTrendingDown size={12} /> : <FiMinus size={12} />}
            {trend.value > 0 ? '+' : ''}{trend.value}%
          </div>
        )}
      </div>
      <div className="mt-4">
        <p className="text-2xl font-bold text-white tracking-tight">{value}</p>
        <p className="text-sm text-white/40 mt-0.5">{label}</p>
      </div>
      {trend && (
        <p className="text-xs text-white/30 mt-2">{trend.label}</p>
      )}
    </motion.div>
  );
}
