import { useState, useEffect } from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import { format } from 'date-fns';
import ClockCanvas from './ClockCanvas';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    font-family: 'Nunito', sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
  }
`;

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  position: relative;
`;

// Overlay for Date/Weather if needed, standard DOM layer on top of Canvas
const Overlay = styled.div`
  position: absolute;
  bottom: 5vh;
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
`;

const DateDisplay = styled.div`
  font-size: 3vh;
  letter-spacing: 0.05em;
  font-weight: 600;
`;

const WeatherDisplay = styled.div`
  font-size: 2vh;
  margin-top: 1vh;
  opacity: 0.8;
`;

function App() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  const dateStr = format(time, 'MMM d, EEEE');

  return (
    <>
      <GlobalStyle />
      <Container>
        <ClockCanvas time={time} />

        <Overlay>
          <DateDisplay>{dateStr}</DateDisplay>
          <WeatherDisplay>Seoul, 24°C</WeatherDisplay>
        </Overlay>
      </Container>
    </>
  );
}

export default App;
