import { Typography } from "@mui/material";
import Box, { BoxProps } from "@mui/material/Box";
import { styled } from "@mui/material/styles";
import React, { useState, useEffect } from "react";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
import AccessTimeIcon from "@mui/icons-material/AccessTime";

const FormattedBox = styled(Box)<BoxProps>(() => ({
  marginRight: 12,
}));

const Clock: React.FC = () => {
  const [date, setDate] = useState<Date>(new Date());

  useEffect(() => {
    setInterval(() => setDate(new Date()), 30000);
  }, []);

  return (
    <Box sx={{ display: "flex" }}>
      <FormattedBox sx={{ mt: 0.5 }}>
        <CalendarTodayIcon />
      </FormattedBox>
      <FormattedBox>
        <Typography variant="h6" color="inherit">
          {date.toLocaleDateString("en-GB", {
            day: "numeric",
            month: "short",
            year: "numeric",
          })}
        </Typography>
      </FormattedBox>
      <FormattedBox sx={{ mt: 0.5 }}>
        <AccessTimeIcon />
      </FormattedBox>
      <FormattedBox>
        <Typography variant="h6" color="inherit">
          {date.toLocaleString("en-US", {
            hour: "numeric",
            minute: "numeric",
            hour12: true,
          })}
        </Typography>
      </FormattedBox>
    </Box>
  );
};

export default Clock;