import * as React from "react"
 
import { useBreadcrumbs } from "@/hooks/use-breadcrumbs"
 
export function BreadcrumbExample() {
  const { items, push, pop, replace, navigate } = useBreadcrumbs({
    autoGenerate: true,
  })
 
  return (
    <nav>
      {items.map((item, index) => (
        <a
          key={item.href}
          href={item.href}
          onClick={(e) => {
            e.preventDefault()
            navigate(item.href)
          }}
        >
          {item.label}
        </a>
      ))}
    </nav>
  )
}

import * as React from "react"
import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
 
import { useBreadcrumbs } from "@/hooks/use-breadcrumbs"
 
export function NextBreadcrumbExample() {
  const router = useRouter()
  const pathname = usePathname()
 
  const { items } = useBreadcrumbs({
    autoGenerate: true,
    navigate: (href) => router.push(href),
    getPathname: () => pathname,
  })
 
  return (
    <nav>
      {items.map((item) => (
        <Link key={item.href} href={item.href}>
          {item.label}
        </Link>
      ))}
    </nav>
  )
}

import * as React from "react"
import { useLocation, useNavigate } from "react-router-dom"
 
import { useBreadcrumbs } from "@/hooks/use-breadcrumbs"
 
export function ReactRouterBreadcrumbExample() {
  const navigate = useNavigate()
  const location = useLocation()
 
  const { items } = useBreadcrumbs({
    autoGenerate: true,
    navigate: (href) => navigate(href),
    getPathname: () => location.pathname,
  })
 
  return (
    <nav>
      {items.map((item) => (
        <a
          key={item.href}
          href={item.href}
          onClick={(e) => {
            e.preventDefault()
            navigate(item.href)
          }}
        >
          {item.label}
        </a>
      ))}
    </nav>
  )
}

import * as React from "react"
 
import { useBreadcrumbs } from "@/hooks/use-breadcrumbs"
 
export function CustomLabelExample() {
  const { items } = useBreadcrumbs({
    autoGenerate: true,
    generateLabel: (segment, index, segments) => {
      const labels: Record<string, string> = {
        dashboard: "Dashboard",
        settings: "Settings",
        profile: "User Profile",
      }
      return labels[segment] || segment
    },
  })
 
  return (
    <nav>
      {items.map((item) => (
        <span key={item.href}>{item.label}</span>
      ))}
    </nav>
  )
}

import * as React from "react"
 
import { useBreadcrumbs } from "@/hooks/use-breadcrumbs"
 
export function ManualBreadcrumbExample() {
  const { items, push, pop, replace, setItems, reset } = useBreadcrumbs({
    autoGenerate: false,
    items: [
      { label: "Home", href: "/" },
      { label: "Products", href: "/products" },
    ],
  })
 
  const handleAddCategory = () => {
    push({ label: "Electronics", href: "/products/electronics" })
  }
 
  const handleRemoveLast = () => {
    pop()
  }
 
  const handleUpdateLast = () => {
    replace({ label: "Updated", href: "/products/updated" })
  }
 
  return (
    <div>
      <nav>
        {items.map((item) => (
          <span key={item.href}>{item.label} / </span>
        ))}
      </nav>
      <button onClick={handleAddCategory}>Add Category</button>
      <button onClick={handleRemoveLast}>Remove Last</button>
      <button onClick={handleUpdateLast}>Update Last</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

import * as React from "react"
 
import { useBreadcrumbs } from "@/hooks/use-breadcrumbs"
 
export function BasePathExample() {
  const { items } = useBreadcrumbs({
    autoGenerate: true,
    basePath: "/app",
    maxDepth: 5,
  })
 
  return (
    <nav>
      {items.map((item) => (
        <a key={item.href} href={item.href}>
          {item.label}
        </a>
      ))}
    </nav>
  )
}

interface UseBreadcrumbsOptions {
  items?: BreadcrumbItem[]
  generateLabel?: (segment: string, index: number, segments: string[]) => string
  autoGenerate?: boolean
  basePath?: string
  maxDepth?: number
}

interface UseBreadcrumbsReturn {
  items: BreadcrumbItem[]
  push: (item: BreadcrumbItem) => void
  pop: () => void
  replace: (item: BreadcrumbItem) => void
  setItems: (items: BreadcrumbItem[]) => void
  reset: () => void
  navigate: (href: string) => void
}

interface BreadcrumbItem {
  label: string
  href: string
}