import React, { useState, useEffect } from "react";
import styled from "styled-components";
import moment from "moment";

const HomeDate = styled.div`
  display: flex;
  flex-direction: column;
`;

const WeatherBox = styled.div``;

const WeatherSpan = styled.span``;

const DateBox = styled.div`
  display: flex;
  flex-direction: column;
`;

const DateSpan = styled.span`
  font-size: ${(props) => {
    if (props.className === "Clock") return "45px";
  }};
`;

export default () => {
  const [date, setDate] = useState(moment().format("h:mm:ss a"));
  useEffect(() => {
    let timer = setInterval(() => tick(), 1000);
    return function cleanUp() {
      clearInterval(timer);
    };
  });

  function tick() {
    setDate(moment().format("h:mm:ss a"));
  }

  return (
    <HomeDate>
      <WeatherBox>
        <WeatherSpan /> Weather
      </WeatherBox>
      <DateBox>
        <DateSpan className="Clock">{date}</DateSpan>
      </DateBox>
    </HomeDate>
  );
};