import styles from '../styles/platform.module.css';

interface Props {
  used: number;
  limit: number;
  label: string;
}

export function UsageIndicator({ used, limit, label }: Props) {
  const unlimited = limit < 0;
  const pct = unlimited ? 0 : Math.min((used / limit) * 100, 100);
  const color = pct >= 100 ? 'var(--error)' : pct >= 80 ? 'var(--warning)' : 'var(--success)';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div className={styles.kvRow}>
        <span className={styles.kvLabel}>{label}</span>
        <span className={styles.kvValue}>{used} / {unlimited ? '\u221e' : limit}</span>
      </div>
      {!unlimited && (
        <div style={{ height: 4, borderRadius: 2, background: 'var(--bg-inset)', overflow: 'hidden' }}>
          <div style={{ width: `${pct}%`, height: '100%', borderRadius: 2, background: color, transition: 'width 0.3s' }} />
        </div>
      )}
    </div>
  );
}