---
import '@/styles/global.css'
import BaseHead from '@/components/layout/BaseHead.astro'
import Header from '@/components/layout/Header.astro'
import Footer from '@/components/layout/Footer.astro'
import BaseLayout from '@/layouts/BaseLayout.astro'
import GradientMask from '@/components/ui/GradientMask.astro'
import { themeConfig } from '@/config'

const { title, description } = Astro.props
---

<BaseLayout title={title} description={description} type="page">
  <BaseHead title={title} description={description} slot="head" />
  <div class="page-content">
    <GradientMask />
    <div>
      <Header />
    </div>
    <main>
      <slot />
    </main>
    {
      themeConfig.general.footer && (
        <div>
          <Footer />
        </div>
      )
    }
  </div>
</BaseLayout>

<style is:global>
  .page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .page-content main {
    flex: 1;
  }
</style>