"use client";

import {
  type JSX,
  useState,
  useEffect,
  useCallback,
  HTMLAttributes,
} from "react";
export const LiveDate = (
  props: HTMLAttributes<HTMLParagraphElement>
): JSX.Element => {
  const formatDate = useCallback((date: Date): string => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }, []);

  const [date, setDate] = useState<string>(formatDate(new Date()));

  useEffect(() => {
    const id = setInterval(() => {
      setDate(formatDate(new Date()));
    }, 10000);
    return () => clearInterval(id);
  }, [formatDate]);

  return <p {...props}>{date}</p>;
};
