"use client";
import React, { useState, useLayoutEffect } from "react";
import Typography, { TypographyProps } from "@mui/material/Typography";
import { useTranslation } from "react-i18next";
import { clockTimeFormatter } from "@/app/utils/formatUtil";
import { NoSsr } from "@mui/material";

const Clock: React.FC<TypographyProps> = (props) => {
  const {
    i18n: { language },
  } = useTranslation();
  const [currentDateTime, setCurrentDateTime] = useState(new Date());

  useLayoutEffect(() => {
    const timer = setInterval(() => {
      setCurrentDateTime(new Date());
    }, 1000);

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

  return (
    <NoSsr>
      <Typography {...props}>
        {clockTimeFormatter(language).format(currentDateTime)}
      </Typography>
    </NoSsr>
  );
};

export default Clock;
