tfm_ainventory/frontend/components/StatCard.tsx

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-2 md:p-3 level-1 transition-all hover:bg-surface-container-lowest/40" 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-normal truncate">
          {label}
        </span>
      </div>

      <span className="text-base md:text-lg font-normal text-primary whitespace-nowrap tabular-nums">
        {value}
      </span>
    </div>
  );
}