"use client"

import * as React from "react"
import { ContentHeader, SidebarToggleButton } from "@/components/custom/content-header"
import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "@/components/ui/breadcrumb"
import { PersonalPage } from "@/lib/schema/personal-page"
import { ID } from "jazz-tools"

export const DetailPageHeader = ({ pageId }: { pageId: ID<PersonalPage> }) => {
	return (
		<ContentHeader>
			<div className="flex min-w-0 gap-2">
				<SidebarToggleButton />

				<Breadcrumb className="flex flex-row items-center">
					<BreadcrumbList className="sm:gap-2">
						<BreadcrumbItem>
							<BreadcrumbPage className="text-foreground font-medium">Pages</BreadcrumbPage>
						</BreadcrumbItem>
					</BreadcrumbList>
				</Breadcrumb>
			</div>
		</ContentHeader>
	)
}