"use client"

import { useState, useEffect } from "react"
import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"

export function ProgressSection() {
  const [progress, setProgress] = useState(13)
  const [animatedProgress, setAnimatedProgress] = useState(0)

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

  const startAnimation = () => {
    setAnimatedProgress(0)
    const interval = setInterval(() => {
      setAnimatedProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          return 100
        }
        return prev + 1
      })
    }, 50)
  }

  return (
    <section id="progress" className="scroll-mt-16">
      <SectionHeading title="Progress" description="Displays an indicator showing the completion progress of a task." />

      <div className="space-y-8">
        <ComponentContainer
          title="Default Progress"
          description="A simple progress bar."
          code={`import { Progress } from "@/components/ui/progress"

export function ProgressDemo() {
  return <Progress value={33} className="w-[60%] min-w-[240px]" />
}`}
        >
          <div className="flex items-center justify-center p-6">
            <Progress value={33} className="w-[60%] min-w-[240px]" />
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Progress with Value"
          description="A progress bar that updates over time."
          code={`import { Progress } from "@/components/ui/progress"
import { useState, useEffect } from "react"

export function ProgressWithValueDemo() {
  const [progress, setProgress] = useState(13)

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

  return (
    <div className="w-[60%] min-w-[240px]">
      <Progress value={progress} />
      <p className="text-sm text-muted-foreground mt-2">
        Progress: {progress}%
      </p>
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="w-[60%] min-w-[240px]">
              <Progress value={progress} />
              <p className="text-sm text-muted-foreground mt-2">Progress: {progress}%</p>
            </div>
          </div>
        </ComponentContainer>

        <ComponentContainer
          title="Animated Progress"
          description="A progress bar with smooth animation."
          code={`import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { useState } from "react"

export function AnimatedProgressDemo() {
  const [progress, setProgress] = useState(0)

  const startAnimation = () => {
    setProgress(0)
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          return 100
        }
        return prev + 1
      })
    }, 50)
  }

  return (
    <div className="w-[60%] min-w-[240px] space-y-4">
      <Progress value={progress} />
      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">
          Progress: {progress}%
        </p>
        <Button onClick={startAnimation} size="sm">
          Start Animation
        </Button>
      </div>
    </div>
  )
}`}
        >
          <div className="flex items-center justify-center p-6">
            <div className="w-[60%] min-w-[240px] space-y-4">
              <Progress value={animatedProgress} />
              <div className="flex items-center justify-between">
                <p className="text-sm text-muted-foreground">Progress: {animatedProgress}%</p>
                <Button onClick={startAnimation} size="sm">
                  Start Animation
                </Button>
              </div>
            </div>
          </div>
        </ComponentContainer>
      </div>
    </section>
  )
}