---
import BaseHeader from '@/components/base/header/base-header.vue'
import '@/assets/styles/global/fonts.scss'
import '@/assets/styles/main.scss'
import 'primeicons/primeicons.css'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { useCompanyInfo } from '@/composables/company';
import {COOKIES_LOCALE_KEY, SUPPORTED_LOCALES} from "@/config/index.js";
import {useCookies} from "@vueuse/integrations/useCookies";

const cookie = useCookies(['/', null, null])

const { getCompanyInfo } = useCompanyInfo();

await getCompanyInfo()

const { locale } = Astro.params;

const availableLocales = SUPPORTED_LOCALES.map(locale => locale.code);
const currentLocale = availableLocales.includes(locale) ? locale : 'en-gb';

const translations = await import(`@/locales/${currentLocale}.json`);

function t(path) {
  const parts = path.split('.');
  let curr = translations;
  for (const p of parts) {
    if (curr && typeof curr === 'object' && p in curr) {
      curr = curr[p];
    } else {
      return path;
    }
  }
  return curr;
}
---

<html lang={locale}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Basics</title>
  </head>
  <body>
    <BaseHeader
        client:load
        locale={locale}
        messages={translations}
    />
    <main class="main">
      <slot />
    </main>
  </body>
</html>

<style lang="scss">
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.main {
  margin-top: 90px;
}
</style>
