import React from "react";

interface StatCardProps {
  label: string;
  value: string;
  trend?: string;
  color: string;
}

const StatCard: React.FC<StatCardProps> = ({
  label,
  value,
  trend,
  color,
}) => (
  <div className="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 group hover:shadow-md transition-shadow">
    <div className="flex justify-between items-start mb-3">
      <span className="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em]">
        {label}
      </span>
      {trend && (
        <span
          className={`text-[10px] font-bold px-2 py-0.5 rounded-md ${
            trend.startsWith("+")
              ? "bg-emerald-50 text-emerald-600"
              : "bg-red-50 text-red-600"
          }`}
        >
          {trend}
        </span>
      )}
    </div>
    <div className="flex items-baseline space-x-1">
      <span className={`text-2xl font-black text-[#002147]`}>{value}</span>
    </div>
    <div className={`mt-4 h-1 w-10 rounded-full ${color}`}></div>
  </div>
);

export default StatCard;