export default function StatCard({
  icon,
  label,
  value,
  accent,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  accent?: string;
}) {
  return (
    <div className="flex items-center gap-2 rounded-2xl border border-black/5 bg-white p-3 md:gap-4 md:p-5">
      <div
        className={`flex size-8 shrink-0 items-center justify-center rounded-xl md:size-12 ${accent ?? 'bg-black/5'}`}
      >
        {icon}
      </div>
      <div>
        <p className="text-sm text-black/50">{label}</p>
        <p className="text-lg font-semibold md:text-xl">{value}</p>
      </div>
    </div>
  );
}