'use client';

import { motion } from 'framer-motion';
import { TrendingDown, TrendingUp } from 'lucide-react';

interface KpiCardProps {
  label: string;
  value: string;
  delta?: string;
  deltaPositive?: boolean;
  icon: React.ReactNode;
  index: number;
}

export function KpiCard({ label, value, delta, deltaPositive, icon, index }: KpiCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut', delay: index * 0.05 }}
      className="bg-bg-card border border-border rounded-2xl p-5 flex items-start gap-4"
    >
      <div className="w-10 h-10 rounded-xl bg-accent/10 border border-accent/20 flex items-center justify-center flex-shrink-0 text-accent-light">
        {icon}
      </div>
      <div className="min-w-0 flex-1">
        <p className="text-[12px] text-text-dim uppercase tracking-wider mb-1">{label}</p>
        <p className="text-2xl font-semibold font-mono tracking-tight">{value}</p>
        {delta && (
          <div
            className={`mt-1.5 inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium border ${
              deltaPositive
                ? 'text-emerald-400 bg-emerald-500/10 border-emerald-500/25'
                : 'text-red-400 bg-red-500/10 border-red-500/25'
            }`}
          >
            {deltaPositive ? (
              <TrendingUp className="w-3 h-3" />
            ) : (
              <TrendingDown className="w-3 h-3" />
            )}
            {delta}
          </div>
        )}
      </div>
    </motion.div>
  );
}