import type { WidgetRegistryMeta } from 'officerdev';
import { useState, useEffect } from 'react';
import { Clock as ClockIcon } from 'lucide-react';
import { Widget } from '../Widget';

export const Clock = () => {
  const [now, setNow] = useState(() => new Date());

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

  const time = now.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' });
  const date = now.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });

  return (
    <Widget title="Clock">
      <div className="flex flex-col items-center gap-1 px-4 pb-4">
        <span className="text-3xl font-bold tabular-nums tracking-tight">{time}</span>
        <span className="text-sm text-muted-foreground">{date}</span>
      </div>
    </Widget>
  );
};

export const widgetRegistryMetas: WidgetRegistryMeta[] = [
  { key: 'clock', name: 'Clock', icon: ClockIcon, component: Clock },
];
