---
import themeConfig from '@/config'
import { getPagePath } from '@/utils/i18n/path'

const { title, subtitle } = themeConfig.site
const { titleSpace } = themeConfig.global
const currentPath = Astro.url.pathname
const { getLocalizedPath } = getPagePath(currentPath)

const marginBottom = {
    1: 'mb-1.625',
    2: 'mb-2.875',
    3: 'mb-4.125',
  }[titleSpace] || 'mb-2.875'
---

<header class="mb-10.625 lg:hidden">
  <h3 class={`${marginBottom} mt-2.9375 text-5.375 c-secondary font-bold font-title`}>
    <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
    <div
      class="box-content inline-block pr-1.25"
      transition:name="site-title"
      data-disable-transition-on-theme
    >
      <a href={getLocalizedPath('/')}>
        {title}
      </a>
    </div>
  </h3>

  {subtitle && (
    <div
      class="text-3.5 opacity-0"
      aria-hidden="true"
    >
      {subtitle}
    </div>
  )}
</header>