<script setup lang="ts">
import ThemeToggle from "./ThemeToggle.vue"

const route = useRoute()

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

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

  const breadcrumbs = segments.map((item, index) => {
    // Bersihkan query parameters dari segment jika ada
    const cleanItem = item.split('?')[0] || item
    const str = cleanItem.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).map(seg => seg.split('?')[0] || seg).join('/')}`,
    }
  })

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

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

watch(
  () => route.path,
  (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" />
      <PubMyUiBreadcrumb :links="links" />
    </div>
     <div class="ml-auto flex items-center gap-2">
       <slot />
       <ThemeToggle />
     </div>
  </header>
</template>

<style scoped></style>
