interface StatsCardProps {
  icon: string;
  title: string;
  value: string;
  trend: string;
  trendColor: "green" | "red" | "blue" | "primary";
}

export default function StatsCard({ icon, title, value, trend, trendColor }: StatsCardProps) {
  // Mapping simple pour les couleurs de tendance
  const colorMap = {
    green: "text-[#078838]",
    red: "text-[#e73908]",
    blue: "text-blue-600",
    primary: "text-primary",
  };

  return (
    <div className="flex flex-col gap-2 rounded-xl p-6 bg-white dark:bg-[#1a202c] border border-[#dbe0e6] dark:border-[#2d3748] shadow-sm">
      <div className="flex items-center gap-2 text-[#617589] dark:text-gray-400 mb-1">
        <span className="material-symbols-outlined text-lg">{icon}</span>
        <p className="text-sm font-medium">{title}</p>
      </div>
      <div className="flex items-baseline gap-2">
        <p className="text-[#111418] dark:text-white tracking-tight text-3xl font-bold">
          {value}
        </p>
        <p className={`${colorMap[trendColor]} text-sm font-bold`}>{trend}</p>
      </div>
    </div>
  );
}