'use client';
import * as React from 'react';
import { Progress } from '@/components/ui/progress';
import type * as ProgressPrimitive from '@radix-ui/react-progress';

type Loading_Props = React.ComponentProps<typeof ProgressPrimitive.Root> & {
  /** how many ms between updates */
  intervalMs?: number;
  /** fraction of the remaining distance to add each tick */
  alpha?: number;
};

export const Loading: React.FC<Loading_Props> = ({
  intervalMs = 50,
  alpha = 0.1,
  className,
  ...props
}: Loading_Props) => {
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const id = window.setInterval(() => {
      setProgress((prev) => {
        // compute the next progress
        const next = prev + (100 - prev) * alpha;
        // optional: round if you want neat numbers
        return Math.min(100, Math.round(next * 10) / 10);
      });
    }, intervalMs);

    return () => window.clearInterval(id);
  }, [intervalMs, alpha]);

  return (
    <div className='items-center justify-center w-1/3 m-auto pt-20'>
      <Progress value={progress} className={className} {...props} />
    </div>
  );
};

export default Loading;