import React from 'react';
import { motion } from 'framer-motion';
import { TrendingUp, TrendingDown } from 'lucide-react';
import InfoTooltip from './common/InfoTooltip';

const KpiCard = ({ title, value, change, trend, icon: Icon, onClick, tooltip }) => {
  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      onClick={onClick}
      className="bg-white dark:bg-gray-950 border border-[#F2F2F2] dark:border-gray-800 rounded-2xl p-6 cursor-pointer transition-shadow hover:shadow-lg relative group"
    >
      <div className="flex items-start justify-between mb-4">
        <div className="w-12 h-12 rounded-xl bg-[#F2F2F2] dark:bg-gray-900 flex items-center justify-center">
          {Icon && <Icon className="w-6 h-6 text-[#338660]" />}
        </div>
        {change && (
          <div className={`flex items-center gap-1 text-sm font-medium ${
            trend === 'up' ? 'text-[#338660] dark:text-green-400' : 
            trend === 'down' ? 'text-[#007E45] dark:text-red-400' : 
            'text-[#6A6A6A] dark:text-gray-400'
          }`}>
            {trend === 'up' ? <TrendingUp className="w-4 h-4" /> : trend === 'down' ? <TrendingDown className="w-4 h-4" /> : null}
            {change}
          </div>
        )}
      </div>
      <div className="flex items-center">
        <h3 className="text-sm text-[#6A6A6A] dark:text-gray-400 mb-1">{title}</h3>
        {tooltip && (
          <div className="mb-1">
             <InfoTooltip {...tooltip} />
          </div>
        )}
      </div>
      <p className="text-2xl font-bold text-black dark:text-white">{value}</p>
    </motion.div>
  );
};

export default KpiCard;