'use client';

import { useEffect, useState } from 'react';

export default function LiveClock() {
    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 dateStr = time.toLocaleDateString('es-CO', {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
        year: 'numeric'
    });

    const timeStr = time.toLocaleTimeString('es-CO', {
        hour: 'numeric',
        minute: '2-digit',
        second: '2-digit'
    });

    return (
        <div className="flex items-center gap-3 h-full">
            <span className="text-slate-300 text-[11px] hidden lg:block font-medium lowercase first-letter:uppercase">
                {dateStr}
            </span>
            <span className="bg-slate-100 text-slate-900 px-2 py-1 rounded text-[11px] font-bold whitespace-nowrap shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)]">
                {timeStr}
            </span>
        </div>
    );
}