Progress

import { UploadIcon } from "lucide-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress";

export default function ProgressLive() {
  const [value, setValue] = React.useState<number | null>(null);
  const timer = React.useRef<ReturnType<typeof setInterval>>(undefined);

  React.useEffect(() => () => clearInterval(timer.current), []);

  function start() {
    clearInterval(timer.current);
    setValue(0);
    timer.current = setInterval(() => {
      setValue((prev) => {
        const next = Math.min(100, (prev ?? 0) + 7);
        if (next === 100) clearInterval(timer.current);
        return next;
      });
    }, 200);
  }

  const uploading = value !== null && value < 100;

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Progress value={value ?? 0}>
        <ProgressLabel>{value === 100 ? "Upload complete" : "design-assets.zip"}</ProgressLabel>
        <ProgressValue />
      </Progress>
      <Button
        variant="secondary"
        size="sm"
        className="self-start"
        onClick={start}
        disabled={uploading}
        focusableWhenDisabled
      >
        <UploadIcon />
        {value === null ? "Start upload" : "Upload again"}
      </Button>
    </div>
  );
}