import { ArrowUpRight } from "lucide-react";

interface StatCardProps {
  title: string;
  value: string;
  increase: string;
  iconBgColor: string;
  iconTextColor: string;
  icon: React.ReactNode;
}

export function StatCard({ title, value, increase, iconBgColor, iconTextColor, icon }: StatCardProps) {
  return (
    <div className="bg-white rounded-2xl shadow-[0_2px_10px_rgba(0,0,0,0.04)] border border-gray-50 p-6 flex items-center gap-5 h-full min-h-[120px]">
      <div className={`w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0 [&>svg]:w-6 [&>svg]:h-6 ${iconBgColor} ${iconTextColor}`}>
        {icon}
      </div>
      <div className="flex flex-col items-start">
        <span className="text-[13px] font-semibold text-gray-800 mb-1">{title}</span>
        <span className="text-3xl font-bold text-gray-900 leading-none mb-2">{value}</span>
        <div className="flex items-center gap-1 text-xs font-medium text-gray-500 whitespace-nowrap">
          <span className="text-[#5cb85c] font-semibold flex items-center">↑ {increase.split(' ')[0]}</span>
          <span>{increase.split(' ').slice(1).join(' ')}</span>
        </div>
      </div>
    </div>
  );
}