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

interface StatCardProps {
  label: string;
  value: number;
  icon?: LucideIcon;
}

export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
  return (
    <div className="flex justify-between items-center gap-2 p-4 bg-slate-900 rounded-lg">
      {/* Icon + Label Container */}
      <div className="flex items-center gap-2 min-w-0">
        {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
        <span className="text-sm md:text-base text-slate-400 truncate">
          {label}
        </span>
      </div>

      {/* Number (Right) */}
      <span className="text-lg md:text-xl font-black text-white whitespace-nowrap">
        {value}
      </span>
    </div>
  );
}