import styles from './StatusCard.module.scss';

export interface StatusCardProps {
  /** Icon element to display */
  icon: React.ReactNode;
  /** Card label text */
  label: string;
  /** Card value (number or text) */
  value: string | number;
  /** Whether the card is in loading state */
  isLoading?: boolean;
  /** Additional CSS classes */
  className?: string;
}

export const StatusCard = ({
  icon,
  label,
  value,
  isLoading = false,
  className = '',
}: StatusCardProps) => {
  const cardClassName = [
    styles.card,
    isLoading && styles.loading,
    className,
  ].filter(Boolean).join(' ');

  return (
    <div className={cardClassName}>
      <div className={styles.header}>
        <span className={styles.icon}>{icon}</span>
        <span className={styles.label}>{label}</span>
      </div>
      <span className={styles.value}>
        {typeof value === 'number' ? value.toLocaleString() : value}
      </span>
    </div>
  );
};