"use client"

import { usePathname } from "next/navigation"
import Link from "next/link"
import { ChevronRight, Home } from "lucide-react"

export function Breadcrumbs() {
  const pathname = usePathname()

  // Skip breadcrumbs on home page
  if (pathname === "/") return null

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

  // Create breadcrumb items
  const breadcrumbs = [
    { name: "Home", href: "/" },
    ...segments.map((segment, index) => {
      const href = `/${segments.slice(0, index + 1).join("/")}`
      // Format the segment name (capitalize first letter, replace hyphens with spaces)
      const name = segment.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())

      return { name, href }
    }),
  ]

  return (
    <nav className="flex px-4 py-2 text-sm text-muted-foreground">
      <ol className="flex items-center space-x-1">
        {breadcrumbs.map((breadcrumb, index) => (
          <li key={breadcrumb.href} className="flex items-center">
            {index > 0 && <ChevronRight className="mx-1 h-4 w-4" />}
            {index === breadcrumbs.length - 1 ? (
              <span className="font-medium text-foreground">{breadcrumb.name}</span>
            ) : (
              <Link href={breadcrumb.href} className="hover:text-foreground hover:underline">
                {index === 0 ? <Home className="h-4 w-4" /> : breadcrumb.name}
              </Link>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}