import React from 'react';
import { LucideIcon } from 'lucide-react';

interface KpiCardProps {
  title: string;
  value: string | number;
  subtitle?: string | React.ReactNode;
  color?: 'pink' | 'purple' | 'emerald' | 'amber' | 'blue' | 'cyan';
  icon?: LucideIcon;
}

export default function KpiCard({
  title,
  value,
  subtitle,
  color = 'purple',
  icon: Icon
}: KpiCardProps) {
  const getColorClasses = () => {
    const colors = {
      purple: { icon: 'text-purple-600', bg: 'bg-purple-50 border-purple-200' },
      emerald: { icon: 'text-green-700', bg: 'bg-green-50 border-green-200' },
      amber: { icon: 'text-amber-700', bg: 'bg-amber-50 border-amber-200' },
      blue: { icon: 'text-blue-700', bg: 'bg-blue-50 border-blue-200' },
      cyan: { icon: 'text-blue-700', bg: 'bg-blue-50 border-blue-200' },
      pink: { icon: 'text-pink-600', bg: 'bg-pink-50 border-pink-200' }
    };
    return colors[color] || colors.pink;
  };

  const { icon, bg } = getColorClasses();

  return (
    <div className="bg-white border border-gray-200 rounded-lg p-3 hover:border-gray-300 transition-colors shadow-sm select-none">
      <div className="flex items-center gap-2">
        {Icon && (
          <div className={`p-1.5 rounded-md ${bg} shrink-0`}>
            <Icon size={14} className={icon} strokeWidth={2.5} />
          </div>
        )}
        <div className="flex-1 min-w-0">
          <div className="flex items-baseline justify-between gap-2">
            <span className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider truncate">{title}</span>
            <span className="text-base font-bold text-slate-800 tabular-nums">{value}</span>
          </div>
          {subtitle && (
            <div className="text-[10px] text-slate-400 truncate">
              {subtitle}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}