import React from 'react';
import Typography from '@mui/material/Typography';

const KOSClientClock = (): React.ReactElement => {
  const [clock, setClock] = React.useState(
    new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
  );

  React.useEffect(() => {
    const interval = setInterval(() => {
      const date = new Date();
      setClock(
        date.toLocaleTimeString(['en-US'], {
          hour: '2-digit',
          minute: '2-digit',
        })
      );
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  });

  const element = (
    <Typography
      variant="h6"
      sx={{ color: 'white', display: 'table-cell', verticalAlign: 'middle' }}
    >
      {clock}
    </Typography>
  );

  return element;
};

export default KOSClientClock;