'use client'

import React, { useState, useEffect } from 'react'

interface DynamicClockIconProps {
    size?: number | string
    className?: string
}

export function DynamicClockIcon({ size = '100%', className = '' }: DynamicClockIconProps) {
    const [time, setTime] = useState<Date | null>(null)

    useEffect(() => {
        setTime(new Date())
        const timer = setInterval(() => {
            setTime(new Date())
        }, 1000)
        return () => clearInterval(timer)
    }, [])

    if (!time) return null

    const seconds = time.getSeconds()
    const minutes = time.getMinutes()
    const hours = time.getHours()

    const secondDegrees = (seconds / 60) * 360
    const minuteDegrees = ((minutes + seconds / 60) / 60) * 360
    const hourDegrees = ((hours + minutes / 60) / 12) * 360

    return (
        <div
            className={`relative bg-black rounded-full border-2 border-gray-600 shadow-lg flex items-center justify-center ${className}`}
            style={{ width: size, height: size }}
        >
            <div className="relative w-full h-full rounded-full bg-black">
                {/* Hour Hand */}
                <div
                    className="absolute top-1/2 left-1/2 w-1 bg-white rounded-full origin-bottom"
                    style={{
                        height: '25%',
                        transform: `translate(-50%, -100%) rotate(${hourDegrees}deg)`
                    }}
                />
                {/* Minute Hand */}
                <div
                    className="absolute top-1/2 left-1/2 w-0.5 bg-gray-300 rounded-full origin-bottom"
                    style={{
                        height: '35%',
                        transform: `translate(-50%, -100%) rotate(${minuteDegrees}deg)`
                    }}
                />
                {/* Second Hand */}
                <div
                    className="absolute top-1/2 left-1/2 w-0.5 bg-orange-500 rounded-full origin-bottom"
                    style={{
                        height: '40%',
                        transform: `translate(-50%, -100%) rotate(${secondDegrees}deg)`
                    }}
                />
                {/* Center Dot */}
                <div className="absolute top-1/2 left-1/2 w-1.5 h-1.5 bg-orange-500 rounded-full transform -translate-x-1/2 -translate-y-1/2" />
            </div>
        </div>
    )
}