"use client"

import { usePathname } from "next/navigation"

import { Separator } from "@/components/ui/separator"

import { SidebarTrigger } from "@/components/ui/sidebar"

import {

Breadcrumb,

BreadcrumbItem,

BreadcrumbLink,

BreadcrumbList,

BreadcrumbPage,

BreadcrumbSeparator,

} from "@/components/ui/breadcrumb"

function getBreadcrumbs(pathname: string) {

const segments = pathname.split("/").filter(Boolean)

return segments.map((segment, index) => {

const href = "/" + segments.slice(0, index + 1).join("/")

const label = segment.charAt(0).toUpperCase() + segment.slice(1)

const isLast = index === segments.length - 1

return { href, label, isLast }

})

}

export function SiteHeader() {

const pathname = usePathname()

const breadcrumbs = getBreadcrumbs(pathname)

return (

<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">

<SidebarTrigger className="-ml-1" />

<Separator orientation="vertical" className="mr-2 h-4" />

<Breadcrumb>

<BreadcrumbList>

{breadcrumbs.map((crumb, index) => (

<span key={crumb.href} className="flex items-center gap-1.5">

{index > 0 && <BreadcrumbSeparator />}

<BreadcrumbItem>

{crumb.isLast ? (

<BreadcrumbPage>{crumb.label}</BreadcrumbPage>

) : (

<BreadcrumbLink href={crumb.href}>

{crumb.label}

</BreadcrumbLink>

)}

</BreadcrumbItem>

</span>

))}

</BreadcrumbList>

</Breadcrumb>

</header>

)

}