Download Button

'use client'

import './download-button.css'

export interface DownloadButtonProps {
  progress: number | null
  onStart?: () => void
  onCancel?: () => void
  label?: string
  size?: string
  fill?: 'dark' | 'light'
  className?: string
}

const C = 2 * Math.PI * 22

/** Button that becomes a progress ring while downloading. */
export function DownloadButton({ progress, onStart, onCancel, label = 'Download', size, fill = 'dark', className }: DownloadButtonProps) {
  const state = progress === null ? 'idle' : progress >= 1 ? 'done' : 'busy'
  const pct = Math.round((progress ?? 0) * 100)
  return (
    <div className={['sd-dlb', className].filter(Boolean).join(' ')} data-fill={fill}>
      <button
        type="button"
        className="sd-dlb__btn"
        data-state={state}
        aria-label={state === 'busy' ? 'Cancel download' : undefined}
        onClick={() => (state === 'busy' ? onCancel?.() : onStart?.())}
      >
        {state === 'busy' ? (
          <>
            <svg className="sd-dlb__ring" viewBox="0 0 48 48" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={pct} aria-label="Download progress">
              <circle cx="24" cy="24" r="22" strokeDasharray={C} strokeDashoffset={C * (1 - (progress ?? 0))} />
            </svg>
            <span className="sd-dlb__pct" aria-hidden>{pct}</span>
          </>
        ) : state === 'done' ? (
          <span key="d" className="sd-dlb__lab"><svg className="i" viewBox="0 0 16 16" aria-hidden><path d="m3.5 8.5 3 3 6-7" /></svg>Downloaded</span>
        ) : (
          <span key="i" className="sd-dlb__lab"><svg className="i" viewBox="0 0 16 16" aria-hidden><path d="M8 2.5v8m-3.5-3.5L8 10.5 11.5 7M3 13.5h10" /></svg>{label}{size && <small>{size}</small>}</span>
        )}
      </button>
      <span className="sd-dlb__hint" aria-live="polite">{state === 'busy' ? 'Tap the ring to cancel' : state === 'done' ? 'Saved to Downloads' : ''}</span>
    </div>
  )
}

.sd-dlb { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-dlb[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-dlb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-dlb :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-dlb .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-dlb { display: grid; justify-items: center; gap: 10px; }
.sd-dlb__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; width: 196px; border-radius: 999px; background: var(--strong) !important; color: var(--on) !important; font-weight: 600; font-size: 14.5px; transition: width 420ms cubic-bezier(0.4, 1.3, 0.4, 1), background-color 300ms, color 300ms; overflow: hidden; white-space: nowrap; }
.sd-dlb__btn[data-state='busy'] { width: 48px; background: var(--soft) !important; color: var(--fg) !important; }
.sd-dlb__btn[data-state='done'] { background: transparent !important; color: var(--fg) !important; box-shadow: inset 0 0 0 1px var(--line); }
.sd-dlb__btn svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-dlb__btn small { font-weight: 400; opacity: 0.6; font-size: 12.5px; }
.sd-dlb__ring { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); }
.sd-dlb__ring circle { fill: none; stroke: var(--fg); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 150ms linear; }
.sd-dlb__pct { font: 600 11px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.sd-dlb__lab { animation: sd-dlb-in 300ms 200ms ease both; display: inline-flex; gap: 8px; align-items: center; }
@keyframes sd-dlb-in { from { opacity: 0; } }
.sd-dlb__hint { font-size: 12.5px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .sd-dlb *, .sd-dlb *::before, .sd-dlb *::after { animation: none !important; transition: none !important; } }