<script setup>
import { DEFAULT_BRAND_COLOR, normalizeBrandColor } from './lib/brand-color.js'

const { data: appSiteSettings } = await useFetch('/api/site-settings', {
  key: 'site-settings-public',
  default: () => ({
    title: 'sori.studio',
    faviconUrl: '',
    logoUrl: '',
    logoText: '井',
    brandColor: DEFAULT_BRAND_COLOR
  })
})

const siteAccentStyle = computed(() => ({
  '--site-accent': normalizeBrandColor(appSiteSettings.value?.brandColor || DEFAULT_BRAND_COLOR)
}))

useHead(() => ({
  titleTemplate: (titleChunk) => titleChunk || appSiteSettings.value.title,
  link: appSiteSettings.value.faviconUrl
    ? [
      {
        rel: 'icon',
        type: 'image/png',
        href: appSiteSettings.value.faviconUrl
      }
    ]
    : []
}))
</script>

<template>
  <div class="site-app" :style="siteAccentStyle">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
