---
import type { ImageMetadata } from "astro";
import { getImage } from "astro:assets";
import Header from "@components/Header.astro";
import "@styles/global.scss";

interface Props {
  title: string;
  backgroundImage: ImageMetadata;
}

const { title, backgroundImage } = Astro.props;
const optimizedBgImage = await getImage({ src: backgroundImage });
const backgroundImageUrl = `url('${optimizedBgImage.src}')`;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <meta
      name="description"
      content="My personal blog where I write about my learnings on software development & coding.
        Learn with my about best coding practices and new tools to add to your developer toolbox."
    />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <title>{title}</title>
  </head>
  <body>
    <div class="wrapper">
      <Header />

      <main>
        <slot />
      </main>

      <footer>
        <p>Built with <a href="https://astro.build/">Astro</a> ♥</p>
        <p>
          Color palette from
          <a href="https://github.com/craftzdog/solarized-osaka.nvim/"
            >Craftzdog</a
          > ♥
        </p>
        <p>© 2024 Victor Martínez. All Rights Reserved.</p>
      </footer>
    </div>
  </body>
</html>

<style define:vars={{ backgroundImageUrl }}>
  body {
    display: flex;
    justify-content: center;
    color: var(--text-color);
    background: var(--backgroundImageUrl) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-size: var(--font-size-m);
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    width: 80ch;
    min-height: calc(100vh - 1rem);
    border: 2px solid white;
    background: rgba(29, 31, 33, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    margin: 0.5rem;
  }

  main {
    padding: 1.5rem 0;
    line-height: 1.5;
  }

  footer {
    color: var(--text-color-light);
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    margin-top: auto;
    gap: 0.5rem;
  }
</style>
