Progress bar

import { motion, useReducedMotion } from 'motion/react';
import { Progress } from '@base-ui/react/progress';

type Props = { fileName: string; percent: number | null };

// Base UI adds role='progressbar' and aria-valuenow; `null` means the total is unknown.
export function UploadProgress({ fileName, percent }: Props) {
  const reduceMotion = useReducedMotion();

  return (
    <Progress.Root
      value={percent}
      className='grid w-72 grid-cols-[1fr_auto] gap-x-3 gap-y-2 text-sm'
    >
      <Progress.Label className='truncate font-medium'>
        {fileName}
      </Progress.Label>
      <Progress.Value className='text-muted-foreground tabular-nums data-complete:text-emerald-600'>
        {(formatted) =>
          percent === null
            ? 'Preparing…'
            : percent === 100
              ? '✓ Done'
              : formatted
        }
      </Progress.Value>
      <Progress.Track className='col-span-2 h-1.5 overflow-hidden rounded-full bg-muted'>
        {percent === null ? (
          // Indeterminate: a 30% segment slides across the track every 1.2s.
          <motion.div
            className='h-full w-[30%] rounded-full bg-blue-500'
            animate={
              reduceMotion
                ? { opacity: [0.4, 1, 0.4] }
                : { x: ['-100%', '333%'] }
            }
            transition={{ duration: 1.2, ease: 'easeInOut', repeat: Infinity }}
          />
        ) : (
          <Progress.Indicator
            className='h-full origin-left rounded-full bg-blue-500 transition-transform duration-300 ease-out data-complete:bg-emerald-500'
            // Base UI sizes the fill with width; scaleX animates it on the GPU instead.
            style={{ width: '100%', transform: `scaleX(${percent / 100})` }}
          />
        )}
      </Progress.Track>
    </Progress.Root>
  );
}