"use client";

import { useState, useEffect } from "react";
import { format } from "date-fns";
import { fr } from "date-fns/locale";

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

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

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

  return (
    <div className="text-right">
      <div className="text-2xl font-bold">
        {format(time, "HH:mm:ss")}
      </div>
      <div className="text-sm text-gray-400">
        {format(time, "EEEE d MMMM yyyy", { locale: fr })}
      </div>
    </div>
  );
}