<script setup lang="ts">
import { siteConfig } from '~/config/site'

useHead({
  titleTemplate: (title) => title ? `${title} - ${siteConfig.siteName}` : siteConfig.title,
  link: [
    { rel: 'icon', href: siteConfig.favicon },
  ],
})

useSeoMeta({
  title: siteConfig.title,
  description: siteConfig.description,
  keywords: siteConfig.keywords.join(','),
  ogTitle: siteConfig.title,
  ogDescription: siteConfig.description,
  ogImage: siteConfig.ogImage,
  ogUrl: siteConfig.url,
  twitterCard: 'summary_large_image',
  twitterTitle: siteConfig.title,
  twitterDescription: siteConfig.description,
  twitterImage: siteConfig.ogImage,
})
</script>

<template>
  <div class="min-h-screen flex flex-col relative z-10">
    <LayoutStarField />
    <LayoutNavBar />
    <main class="flex-1 relative z-10">
      <slot />
    </main>
    <LayoutFooter />
  </div>
</template>
