import { useState, useEffect } from 'react';

function formatTime(date: Date): string {
  return date.toLocaleTimeString('en-US', {
    hour: 'numeric',
    minute: '2-digit',
    hour12: true,
  });
}

function formatDate(date: Date): string {
  return date.toLocaleDateString('en-US', {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
  });
}

export default function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="p-3">
      <div className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">
        Clock
      </div>
      <div className="font-mono text-lg text-text-primary">
        {formatTime(time)}
      </div>
      <div className="text-sm text-text-secondary">
        {formatDate(time)}
      </div>
    </div>
  );
}