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-3.5 bg-surface/70 border border-slate-800/50 rounded-2xl shadow-sm transition-all hover:bg-surface" role="status">
      <div className="flex items-center gap-2.5 min-w-0">
        {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" aria-hidden="true" />}
        <span className="text-base md:text-lg text-secondary font-semibold truncate">
          {label}
        </span>
      </div>

      <span className="text-2xl md:text-3xl font-black text-white whitespace-nowrap tabular-nums">
        {value}
      </span>
    </div>
  );
}
