"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

export default function Progress() {
  const [progress, setProgress] = React.useState(13)

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return (
    <div className="w-full max-w-sm space-y-2">
      <div className="flex w-full justify-between text-sm text-zinc-500 dark:text-zinc-400">
        <span>Progress</span>
        <span>{progress}%</span>
      </div>
      <div className="h-2 w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
        <div
          className="h-full bg-zinc-900 transition-all duration-500 ease-in-out dark:bg-zinc-50"
          style={{ width: `${progress}%` }}
        />
      </div>
    </div>
  )
}