export function MetricBar({ label, percent, detail }: { label: string; percent: number; detail: string }) {
  return (
    <div className="flex flex-1 flex-col gap-1">
      <div className="flex items-center justify-between text-[11px] text-fg-muted">
        <span>{label}</span>
        <span className="font-mono tabular-nums text-fg">{detail}</span>
      </div>
      <div className="h-1 overflow-hidden rounded-full bg-surface-raised">
        <div
          className="h-full rounded-full bg-accent transition-[width] duration-500 ease-out"
          style={{ width: `${Math.min(100, Math.max(0, percent))}%` }}
        />
      </div>
    </div>
  );
}