'use client';

import React, { useState, useEffect } from 'react';
import { Clock } from 'lucide-react';

export function RealtimeClock() {
  const [time, setTime] = useState<Date | null>(null);

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

  if (!time) {
    return (
      <div className="flex items-center gap-1.5 text-xs font-semibold text-slate-400 bg-slate-50 px-3 py-1.5 rounded-xl border border-slate-100 animate-pulse">
        <Clock className="h-3.5 w-3.5" />
        <span>Memuat waktu...</span>
      </div>
    );
  }

  const formatOptions: Intl.DateTimeFormatOptions = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };

  const dayDateStr = time.toLocaleDateString('id-ID', formatOptions);
  const timeStr = time.toLocaleTimeString('id-ID', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  });

  return (
    <div className="flex items-center gap-2 text-xs font-bold text-slate-500 bg-slate-50 px-3.5 py-1.5 rounded-xl border border-slate-100/80 shadow-sm transition-all duration-300">
      <Clock className="h-3.5 w-3.5 text-slate-400" />
      <span className="text-slate-600">{dayDateStr}</span>
      <span className="text-slate-300">|</span>
      <span className="font-mono text-slate-700">{timeStr} WIB</span>
    </div>
  );
}