---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";

const {
  title,
  description = "Barrett Ruth's website",
  bodyClass = "graph-background",
} = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content={description} />
    <link rel="icon" type="image/webp" href="/logo.webp" />
    <link rel="stylesheet" href="/styles/common.css" />
    <title>{title}</title>
    <slot name="head" />
  </head>
  <body class={bodyClass}>
    <Header />
    <main class="main">
      <slot />
    </main>
    <Footer />
    <script is:inline>
      window.getTopicColor = function (topicName) {
        switch ((topicName || "").toLowerCase()) {
          case "software":
            return "#0073e6";
          case "algorithms":
            return "#d50032";
          case "meditations":
            return "#6a0dad";
          case "autonomous-racing":
            return "#3d8a44";
          case "git":
            return "#cc5500";
          default:
            return "#000000";
        }
      };
    </script>
    <slot name="scripts" />
  </body>
</html>
