app/components/DynamicCalendarIcon.tsx

'use client'

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

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

export function DynamicCalendarIcon({ size = '100%', className = '' }: DynamicCalendarIconProps) {
    const [date, setDate] = useState<Date | null>(null)

    useEffect(() => {
        setDate(new Date())
        // Update date every minute to ensure it changes at midnight
        const timer = setInterval(() => {
            setDate(new Date())
        }, 60000)
        return () => clearInterval(timer)
    }, [])

    if (!date) return null

    const dayName = date.toLocaleDateString('en-US', { weekday: 'short' }).toUpperCase()
    const dayNumber = date.getDate()

    return (
        <div
            className={`flex flex-col items-center justify-center bg-white rounded-xl overflow-hidden shadow-lg border border-gray-200 ${className}`}
            style={{ width: size, height: size }}
        >
            {/* Red Header */}
            <div className="w-full bg-red-500 text-white font-bold flex items-center justify-center h-[30%] text-[0.6em] tracking-wide">
                {dayName}
            </div>
            {/* Date Body */}
            <div className="flex-1 flex items-center justify-center bg-white w-full pb-1">
                <span className="text-black font-bold text-[1.4em] leading-none">{dayNumber}</span>
            </div>
        </div>
    )
}