---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import Sidebar from '../components/Sidebar.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';

interface Props {
  title?: string;
  description?: string;
}

const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
---

<!doctype html>
<html lang="en">
	<head>
		<BaseHead title={title} description={description} />
	</head>
	<body>
    <div class="header">
      <Header />
    </div>
    <div class="sidebar">
      <Sidebar />
    </div>
    <main>
      <slot>
    </main>
    <div class="footer">
      <Footer />
    </div>
	</body>
  <style>
    @media (max-width: 1000px) {
      body {
        grid-template-areas: 
          "header"
          "main"
          "footer";
        grid-template-columns: 1fr;
        margin: 1rem 0.5rem;
      }
      main {
        padding: 1em;
      }
      .header {
        display: block;
      }
      .sidebar {
        display: none;
      }
    }

    @media (min-width: 1000px) {
      body {
        grid-template-areas: 
          "header header"
          "sidebar main"
          "footer footer";
        grid-template-columns: 20rem 1fr;
        margin: 2rem 1rem;
        max-width: 1600px;
      }
      .header {
        display: none;
      }
      .sidebar {
        display: block;
      }
    }

    @media (max-width: 500px) {
      body {
        font-size: 14px;
      }
    }

    body {
      display: grid;
    }

    .header {
      grid-area: header;
    }

    .sidebar {
      grid-area: sidebar;
    }

    main {
      grid-area: main;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: stretch;
    }

    .footer { 
      grid-area: footer;
    }
  </style>
</html>
