"use client";

import { useEffect, useState } from "react"

import { Progress } from "./progress"

export function ProgressDemo() {

const [progress, setProgress] = useState(0)

useEffect(() => {

// Initial delay then animate

const timer = setTimeout(() => setProgress(66), 500)

// Looping animation for demo purposes

const interval = setInterval(() => {

setProgress((v) => (v >= 100 ? 0 : v + 33))

}, 2000)

return () => {

clearTimeout(timer)

clearInterval(interval)

}

}, [])

return (

<div className="flex items-center justify-center min-h-[400px] bg-zinc-50 dark:bg-black p-8">

<div className="w-full max-w-[200px]">

<Progress value={progress} />

</div>

</div>

)

}