<script setup lang="ts">
// This is the global app setup function
const { locale } = useI18n()

const rtlCodes = [
  'ar',
  'arc',
  'dv',
  'fa',
  'ha',
  'he',
  'khw',
  'ks',
  'ku',
  'ps',
  'ur',
  'yi',
]

useHead(() => ({
  title: '소액계약관리플랫폼',
  link: [
    // {
    //   rel: 'icon',
    //   href: '/favicon.svg',
    //   type: 'image/svg+xml',
    // },
    {
      rel: 'alternate icon',
      href: '/favicon.ico',
      type: 'image/x-icon',
      sizes: '16x16',
    },
    // {
    //   rel: 'apple-touch-icon',
    //   href: '/apple-touch-icon.png',
    //   type: 'image/png',
    //   sizes: '180x180',
    // },
    // {
    //   rel: 'mask-icon',
    //   href: '/favicon.svg',
    //   type: 'image/svg+xml',
    //   color: '#FFFFFF',
    // },
  ],
  meta: [
    // Critical Tags
    { charset: 'utf-8' },
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1, shrink-to-fit=no',
    },
    // PWA theme color
    {
      name: 'theme-color',
      content: '#ffffff',
    },
    {
      name: 'msapplication-TileColor',
      content: '#232326',
    },
    // SEO
    {
      name: 'robots',
      content: 'index,follow,max-image-preview:large',
    },
    {
      name: 'description',
      content:
        '한국남부발전-소액계약관리플랫폼',
    },
    // Open Graph
    {
      property: 'og:site_name',
      content: '소액계약관리플랫폼',
    },
    {
      property: 'og:locale',
      content: 'ko_KR',
    },
    {
      property: 'og:type',
      content: 'website',
    },
    {
      property: 'og:url',
      content: 'https://svcm.kospo.co.kr/',
    },
    {
      property: 'og:image:type',
      content: 'image/png',
    },
    {
      property: 'og:image:width',
      content: '1200',
    },
    {
      property: 'og:image:height',
      content: '630',
    },
    // {
    //   property: 'og:image',
    //   content:
    //     'https://media.cssninja.io/embed/marketplace/product/wide.png?headline=Vue%203%20Admin%20and%20Webapp%20UI%20Kit&url=https%3A%2F%2Fcdn.schema.io%2Fcssninja%2F62671c0f1bfb2b0019e066aa%2F5badfba048f6ec5250e5e1a4e35cc5d2&previewUrl=https%3A%2F%2Fcdn.schema.io%2Fcssninja%2F62509cb6c752bf01326ee966%2Fa0c4a94938866331845447c595aacef2',
    // },
    // // Twitter
    // {
    //   name: 'twitter:site',
    //   content: '@cssninjaStudio',
    // },
  ],
  htmlAttrs: {
    lang: locale.value,
    dir: rtlCodes.includes(locale.value) ? 'rtl' : 'ltr',
  },
}))
</script>

<template>
  <div>
    <Suspense>
      <RouterView v-slot="{ Component }">
        <Transition
          name="fade-slow"
          mode="out-in"
        >
          <component :is="Component" />
        </Transition>
      </RouterView>
    </Suspense>
  </div>
</template>
