import { motion, useReducedMotion } from 'framer-motion';
import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
import Card from '@/components/ui/Card';

interface MetricCardProps {
  title: string;
  value: number | string;
  change?: number;
  icon: React.ElementType;
  suffix?: string;
  prefix?: string;
  delay?: number;
}

export default function MetricCard({
  title,
  value,
  change,
  icon: Icon,
  suffix = '',
  prefix = '',
  delay = 0,
}: MetricCardProps) {
  const shouldReduceMotion = useReducedMotion();
  const isPositive = change && change > 0;
  const isNegative = change && change < 0;

  return (
    <motion.div
      initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay }}
    >
      <Card className="p-5 h-full">
        <div className="flex items-start justify-between mb-3">
          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary-blue/10">
            <Icon className="w-5 h-5 text-primary-blue" />
          </div>
          {change !== undefined && (
            <div className={`flex items-center gap-1 text-sm font-medium ${
              isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
            }`}>
              {isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
              {Math.abs(change)}%
            </div>
          )}
        </div>
        <div className="text-2xl font-bold text-white mb-1">
          {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
        </div>
        <div className="text-sm text-gray-400">{title}</div>
      </Card>
    </motion.div>
  );
}