Progress

'use client'

import { Progress, ProgressValue } from '@nerdfish/react/progress'
import { useEffect, useState } from 'react'

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

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

	return (
		<div className="w-125 max-w-[calc(100vw-3rem)]">
			<Progress value={progress}>
				<ProgressValue />
			</Progress>
		</div>
	)
}

'use client'

import { Progress } from '@nerdfish/react/progress'
import { useEffect, useState } from 'react'

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

	useEffect(() => {
		const timer = setInterval(() => {
			setProgress((prev) => {
				if (prev >= 100) {
					return 0 // Reset for continuous loop
				}
				return prev + Math.random() * 2 + 0.5 // Random increment 0.5-2.5
			})
		}, 200)

		return () => {
			clearInterval(timer)
		}
	}, [])

	return (
		<div className="w-125 max-w-[calc(100vw-3rem)] space-y-2">
			<h3 className="text-sm font-medium">Pulsing Animation</h3>
			<Progress
				value={progress}
				className="**:data-[slot=progress-indicator]:animate-pulse **:data-[slot=progress-indicator]:bg-purple-600"
			/>
			<div className="text-muted-foreground inline-flex items-center gap-2 text-xs">
				Processing data...
				<span>{Math.round(progress)}%</span>
			</div>
		</div>
	)
}

'use client'

import { Progress, ProgressValue } from '@nerdfish/react/progress'
import { useEffect, useState } from 'react'

export default function ProgressVariantsExample() {
	const [progress, setProgress] = useState(60)

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

	return (
		<div className="space-y-casual w-125 max-w-[calc(100vw-3rem)]">
			<div className="space-y-2">
				<h3 className="text-sm font-medium">Default</h3>
				<Progress value={progress}>
					<ProgressValue />
				</Progress>
			</div>

			<div className="space-y-2">
				<h3 className="text-sm font-medium">Green</h3>
				<Progress
					value={progress}
					className="**:data-[slot=progress-indicator]:bg-green-500"
				>
					<ProgressValue />
				</Progress>
			</div>

			<div className="space-y-2">
				<h3 className="text-sm font-medium">Yellow</h3>
				<Progress
					value={progress}
					className="**:data-[slot=progress-indicator]:bg-yellow-500"
				>
					<ProgressValue />
				</Progress>
			</div>

			<div className="space-y-2">
				<h3 className="text-sm font-medium">Destructive</h3>
				<Progress
					value={progress}
					className="**:data-[slot=progress-indicator]:bg-destructive"
				>
					<ProgressValue />
				</Progress>
			</div>
		</div>
	)
}

'use client'

import { Progress } from '@nerdfish/react/progress'
import { useEffect, useState } from 'react'

export default function ProgressStatusExample() {
	const [downloadProgress, setDownloadProgress] = useState(0)

	// Get status message based on progress
	const getStatusMessage = (progress: number) => {
		if (progress < 5) return 'Initializing download...'
		if (progress < 15) return 'Setting up environment...'
		if (progress < 25) return 'Connecting to server...'
		if (progress < 35) return 'Verifying permissions...'
		if (progress < 50) return 'Downloading core files...'
		if (progress < 65) return 'Downloading assets...'
		if (progress < 80) return 'Downloading dependencies...'
		if (progress < 90) return 'Extracting files...'
		if (progress < 95) return 'Validating integrity...'
		if (progress < 100) return 'Finalizing installation...'
		return 'Download complete!'
	}

	useEffect(() => {
		// Download simulation
		const downloadTimer = setInterval(() => {
			setDownloadProgress((prev) => {
				if (prev >= 100) {
					return 0 // Reset for continuous loop
				}
				return prev + Math.random() * 3 + 1 // Random increment 1-4
			})
		}, 150)

		return () => {
			clearInterval(downloadTimer)
		}
	}, [])

	return (
		<div className="space-y-casual w-125 max-w-[calc(100vw-3rem)]">
			<div className="flex justify-between text-sm">
				<span>Workspace Setup</span>
				<span className="text-foreground-muted">
					{Math.round(downloadProgress)}%
				</span>
			</div>
			<Progress value={downloadProgress} />
			<div className="text-foreground-muted text-xs">
				{getStatusMessage(downloadProgress)}
			</div>
		</div>
	)
}

'use client'

import { Progress, ProgressValue } from '@nerdfish/react/progress'
import { useEffect, useState } from 'react'

export default function ProgressSizesExample() {
	const [progress, setProgress] = useState(45)

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

	return (
		<div className="space-y-casual w-125 max-w-[calc(100vw-3rem)]">
			<div className="space-y-2">
				<h3 className="text-sm font-medium">Small</h3>
				<Progress value={progress} className="h-1">
					<ProgressValue />
				</Progress>
			</div>

			<div className="space-y-2">
				<h3 className="text-sm font-medium">Medium (Default)</h3>
				<Progress value={progress}>
					<ProgressValue />
				</Progress>
			</div>

			<div className="space-y-2">
				<h3 className="text-sm font-medium">Large</h3>
				<Progress value={progress} className="h-3">
					<ProgressValue />
				</Progress>
			</div>
		</div>
	)
}

'use client'

import { ProgressCircle } from '@nerdfish/react/progress'
import { useEffect, useState } from 'react'

export default function ProgressCircleExample() {
	const [cpuUsage, setCpuUsage] = useState(0)

	useEffect(() => {
		// CPU usage simulation
		const cpuTimer = setInterval(() => {
			setCpuUsage((prev) => {
				const target =
					30 + Math.sin(Date.now() / 3000) * 20 + Math.random() * 15
				return prev + (target - prev) * 0.1
			})
		}, 100)

		return () => {
			clearInterval(cpuTimer)
		}
	}, [])

	return (
		<div className="flex items-center justify-center">
			<div className="flex flex-col items-center gap-3">
				<ProgressCircle
					value={cpuUsage}
					size={80}
					strokeWidth={6}
					className="text-info-background"
					indicatorClassName="text-info"
				>
					<div className="text-info text-center">
						<div className="text-base font-bold">{Math.round(cpuUsage)}%</div>
						<div className="text-muted-foreground text-xs">CPU</div>
					</div>
				</ProgressCircle>
				<span className="text-muted-foreground text-xs">Processor Usage</span>
			</div>
		</div>
	)
}