"use client"

import { useDriveQuota } from "@/lib/api/hooks/use-drive-queries"

function formatBytes(n: number) {
  if (n < 1024) return `${n} o`
  if (n < 1024 ** 2) return `${(n / 1024).toFixed(1)} Ko`
  if (n < 1024 ** 3) return `${(n / 1024 ** 2).toFixed(1)} Mo`
  return `${(n / 1024 ** 3).toFixed(1)} Go`
}

export function DriveQuotaBar() {
  const { data } = useDriveQuota()
  if (!data || data.total <= 0) return null
  const usedPct = Math.min(100, Math.round((data.used / data.total) * 100))
  return (
    <div className="space-y-1 text-xs text-muted-foreground">
      <div className="flex justify-between">
        <span>Stockage</span>
        <span>{formatBytes(data.used)} / {formatBytes(data.total)}</span>
      </div>
      <div className="h-1.5 overflow-hidden rounded-full bg-muted">
        <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${usedPct}%` }} />
      </div>
    </div>
  )
}