<script setup lang="ts">
import { VisuallyHidden } from 'radix-vue'
import type { HeaderLink } from '~/types/link'

withDefaults(
  defineProps<{
    to?: string
    title?: string
    links?: HeaderLink[]
  }>(),
  {
    to: '/',
    title: undefined,
    links: () => [],
  },
)
</script>

<template>
  <div
    class="bg-background/75 backdrop-blur border-b border-border -mb-px sticky top-0 z-50"
  >
    <UiContainer :class="$attrs.containerClass" class="h-[--header-height] flex items-center justify-between gap-3">
      <div class="lg:flex-1 flex items-center gap-1.5">
        <NuxtLink :to="to" class="text-lg font-semibold text-foreground">
          <slot name="logo">
            {{ title }}
          </slot>
        </NuxtLink>
      </div>
      <slot name="center">
        <UiHeaderLinks :links="links" class="hidden lg:flex" />
      </slot>
      <div class="flex items-center justify-end lg:flex-1 gap-1.5">
        <slot name="right" />
        <div>
          <ClientOnly>
            <Sheet>
              <SheetTrigger>
                <Button class="lg:hidden" variant="ghost" size="icon">
                  <span class="i-ph:list-bold" />
                </Button>
              </SheetTrigger>
              <SheetContent side="right">
                <SheetHeader class="mb-2">
                  <SheetTitle>
                    <slot name="logo">
                      {{ title }}
                    </slot>
                  </SheetTitle>
                  <VisuallyHidden>
                    <SheetDescription />
                  </VisuallyHidden>
                </SheetHeader>
                <slot name="panel">
                  <UiAsideLinks class="py-4" :links="links" />
                </slot>
              </SheetContent>
            </Sheet>
            <template #fallback>
              <Button class="lg:hidden" variant="ghost" size="icon">
                <span class="i-ph:list-bold" />
              </Button>
            </template>
          </ClientOnly>
        </div>
      </div>
    </UiContainer>
  </div>
</template>
