import { SidebarTrigger } from "@/components/ui/sidebar"
import { Separator } from "@/components/ui/separator"
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { usePathname } from "next/navigation"

export function AppHeader() {
    const pathname = usePathname()
    const segments = pathname?.split("/").filter(Boolean) || []

    // Capitalize and format path segments
    const formatSegment = (s: string) => s.charAt(0).toUpperCase() + s.slice(1).replace(/-/g, " ")

    return (
        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
            <div className="flex items-center gap-2">
                <SidebarTrigger className="-ml-1" />
                <Separator orientation="vertical" className="mr-2 h-4" />
                <Breadcrumb>
                    <BreadcrumbList>
                        {segments.length === 0 ? (
                            <>
                                <BreadcrumbItem className="hidden md:block">
                                    <BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
                                </BreadcrumbItem>
                                <BreadcrumbSeparator className="hidden md:block" />
                                <BreadcrumbItem>
                                    <BreadcrumbPage>Overview</BreadcrumbPage>
                                </BreadcrumbItem>
                            </>
                        ) : (
                            segments.map((segment, index) => {
                                const isLast = index === segments.length - 1
                                const href = "/" + segments.slice(0, index + 1).join("/")

                                return (
                                    <React.Fragment key={href}>
                                        <BreadcrumbItem>
                                            {isLast ? (
                                                <BreadcrumbPage>{formatSegment(segment)}</BreadcrumbPage>
                                            ) : (
                                                <BreadcrumbLink href={href}>{formatSegment(segment)}</BreadcrumbLink>
                                            )}
                                        </BreadcrumbItem>
                                        {!isLast && <BreadcrumbSeparator />}
                                    </React.Fragment>
                                )
                            })
                        )}
                    </BreadcrumbList>
                </Breadcrumb>
            </div>
        </header>
    )
}

import React from "react" // Ensure React is imported for Fragment