<script setup lang="ts">
const route = useRoute()

function setLinks() {
  if (route.fullPath === '/') {
    return [{ title: 'Home', href: '/' }]
  }

  const segments = route.fullPath.split('/').filter((item) => item !== '')

  const breadcrumbs = segments.map((item, index) => {
    const str = item.replace(/-/g, ' ')
    const title = str
      .split(' ')
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
      .join(' ')

    return {
      title,
      href: `/${segments.slice(0, index + 1).join('/')}`,
    }
  })

  return [{ title: 'Home', href: '/' }, ...breadcrumbs]
}

const links = ref<
  {
    title: string
    href: string
  }[]
>(setLinks())

watch(
  () => route.fullPath,
  (val) => {
    if (val) {
      links.value = setLinks()
    }
  }
)
</script>

<template>
  <header class="h-53px bg-background sticky top-0 z-10 flex items-center gap-4 border-b px-4 md:px-6">
    <div class="flex w-full items-center gap-4">
      <SidebarTrigger />
      <Separator orientation="vertical" class="h-4" />
      <!-- <BaseBreadcrumbCustom :links="links" /> -->
    </div>
    <div class="ml-auto">
      <slot />
    </div>
  </header>
</template>

<style scoped></style>
