---
import Navbar from '../components/navbar.astro'
import NavbarEntry from '../components/navbarEntry.astro'
import navdata from '../data/_navdata.json'
import embed from '../assets/embed.png'
import home from 'iconoir/icons/home.svg'
import database from 'iconoir/icons/database.svg'
import databasestar from 'iconoir/icons/database-star.svg'
import mail from 'iconoir/icons/mail.svg'
import type { IconsLookup } from '../types/generic'

export interface Props {
  title: string
  currentpage: string
  descriptionOverride?: string
}

const icons: IconsLookup = {
  home: home,
  database: database,
  databasestar: databasestar,
  about: mail
}

const { descriptionOverride, currentpage, title } = Astro.props
let description

if (descriptionOverride === undefined) {
  description = 'FGO TA Catalogue'
} else {
  description = descriptionOverride
}

let currPage = 'https://fgo-ta.com/'
if (currentpage !== 'home') {
  currPage += currentpage
}

const mapped_navdata = navdata.map((item) => ({
  ...item,
  ...{ icon: icons[item.icon] },
}))
---

<!doctype html>
<html lang="en">
  <head>
    <title>{title}</title>
    <!-- Meta Tags -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <meta name="description" content={description} />
    <meta property="og:title" content={title} />
    <meta property="og:url" content={currPage} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={embed.src} />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_US" />
    <meta name="theme-color" content="#b86cff" />
    <!-- Disable DarkReader, as site is already in dark mode -->
    <meta name="darkreader-lock" content="this site only has darkmode"> 
    <!-- Links -->
    <link rel="icon" type="image/ico" href="/favicon.ico" />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <link href="https://mastodon.neshweb.net/@Firq" rel="me" />
  </head>
  <body>
    <Navbar>
      {
        mapped_navdata.map((item) => (
          <NavbarEntry
            currentPage={currentpage}
            navtype="desktop"
            {...item}
            slot="desktop"
          />
        ))
      }
      {
        mapped_navdata.map((item) => (
          <NavbarEntry
            currentPage={currentpage}
            navtype="mobile"
            {...item}
            slot="mobile"
          />
        ))
      }
    </Navbar>
    <slot />
  </body>
</html>
<style is:global>
  :root {
    --hover-scale: 1.05;
    --speed: 0.5;
    --ease: 50%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --c-darkgray: #1e1e1e;
    --c-duskgray: #242424;
    --c-gray: #2e2e2e;
    --c-lightgray: #3e3e3e;
    --c-darkpurple: #b86cff;
    --c-lighterpurple: #c98fff;
    --c-purplepink: #c105ff;
    --c-darkergray: #1b1b1b;
    --c-reddish: #ff0077;
    --c-lighter: #eee;
  }
  body {
    background: var(--c-lightgray);
    margin: 0px;
  }

  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
</style>
