---
import '@assets/website_layout.css';
import BaseLayout from '../BaseLayout.astro';
import { Icon } from 'astro-icon/components';
import Menu from '@app/layout/Menu.svelte';

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

  footer?: boolean;
}

const { title, description, footer = true } = Astro.props;
---

<BaseLayout title={title} description={description} viewTransition>
  <main class="min-h-[calc(100vh-3.5rem)] h-full w-full relative">
    <slot />
  </main>
  <nav>
    <Menu client:load transition:persist />
  </nav>
  <footer class="flex justify-around items-center h-14 w-full bg-base-300 relative" hidden={!footer}>
    <div class="hidden sm:block">
      <p>© {new Date().getFullYear()} mhsl.eu</p>
    </div>
    <div class="flex gap-12">
      <div class="flex gap-4">
        <a class="link" href="https://mhsl.eu/id.html" target="_blank">Impressum</a>
        <a class="link" href="https://mhsl.eu/datenschutz.html" target="_blank">Datenschutz</a>
      </div>
      <div class="hidden sm:flex gap-2 items-center">
        <a href="ts3server://mhsl.eu?port=9987" target="_blank">
          <Icon name="fa-brands:teamspeak" />
        </a>
        <a href="https://discord.gg/EBGefWPc2K" target="_blank">
          <Icon name="fa-brands:discord" />
        </a>
      </div>
    </div>
  </footer>
</BaseLayout>