'use client';

/* ════════════════════════════ StorageGauge ════════════════════════════ */

interface StorageGaugeProps {
  usedGB: number;
  maxGB: number;
  label?: string;
}

export default function StorageGauge({ usedGB, maxGB, label = 'Storage' }: StorageGaugeProps) {
  const pct = maxGB > 0 ? Math.min((usedGB / maxGB) * 100, 100) : 0;
  const color =
    pct > 90 ? 'bg-accent-rose' : pct > 70 ? 'bg-accent-amber' : 'bg-accent-cyan';

  const textColor =
    pct > 90 ? 'text-accent-rose' : pct > 70 ? 'text-accent-amber' : 'text-accent-cyan';

  return (
    <div className="glass rounded-xl p-5">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs text-surface-400">{label}</span>
        <span className={`text-xs font-mono font-medium ${textColor}`}>
          {usedGB.toFixed(1)} / {maxGB.toFixed(1)} GB
        </span>
      </div>
      <div className="h-2.5 rounded-full bg-surface-700 overflow-hidden">
        <div
          className={`h-full rounded-full transition-all duration-700 ease-out ${color}`}
          style={{ width: `${pct}%` }}
        />
      </div>
      <div className="flex justify-between mt-1.5">
        <span className="text-[10px] text-surface-500">{pct.toFixed(0)}% gebruikt</span>
        {pct > 80 && (
          <span className="text-[10px] text-accent-rose flex items-center gap-1">
            ⚠️ Bijna vol
          </span>
        )}
      </div>
    </div>
  );
}