Bar breadcrumbs

"use client"

import type * as React from "react"
import { ChevronRight } from "lucide-react"

import { cn } from "@/lib/utils"

/* Bar breadcrumb family: 5 contained surfaces. The trail and the separator are always the same; what changes is the container wrapping the trail (a full-width lined bar, a rounded card, a border only, a solid secondary surface, a sticky bar that stays on top while scrolling). Colour comes ONLY from tokens (alpha via color-mix), the size is a text scale plus gap plus height. The last item is the current page (aria-current), not a link. Deterministic, no motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

type Crumb = { label: React.ReactNode; href?: string }

type Props = {
  className?: string
  size?: StyledSize
  items?: Crumb[]
}

const trail: Record<StyledSize, string> = {
  sm: "gap-1.5 text-xs",
  md: "gap-2 text-sm",
  lg: "gap-2.5 text-sm",
  xl: "gap-3 text-base",
}

const box: Record<StyledSize, string> = {
  sm: "min-h-8 px-2.5 py-1.5",
  md: "min-h-9 px-3 py-2",
  lg: "min-h-10 px-4 py-2.5",
  xl: "min-h-12 px-5 py-3",
}

const radius: Record<StyledSize, string> = {
  sm: "rounded-md",
  md: "rounded-lg",
  lg: "rounded-lg",
  xl: "rounded-xl",
}

const defaultItems: Crumb[] = [
  { label: "Home", href: "#" },
  { label: "Components", href: "#" },
  { label: "Button" },
]

const link =
  "inline-flex items-center gap-1.5 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none"

const current =
  "inline-flex items-center gap-1.5 font-medium text-foreground [&_svg]:size-3.5 [&_svg]:shrink-0 [&_i]:text-sm [&_i]:leading-none"

const sep =
  "flex items-center text-muted-foreground/60 [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-sm [&>i]:leading-none"

/* Shared shell: barClassName carries each variant's container technique. */
function BarTrail({
  className,
  size = "md",
  items,
  barClassName,
}: Props & { items: Crumb[]; barClassName: string }) {
  return (
    <nav
      data-slot="styled-breadcrumb"
      aria-label="Breadcrumb"
      className={cn("flex max-w-full items-center", box[size], barClassName, className)}
    >
      <ol className={cn("flex flex-wrap items-center", trail[size])}>
        {items.map((item, i) => {
          const last = i === items.length - 1
          return (
            <li key={i} className="inline-flex items-center gap-1.5">
              {last || !item.href ? (
                <span className={current} aria-current="page">
                  {item.label}
                </span>
              ) : (
                <a href={item.href} className={link}>
                  {item.label}
                </a>
              )}
              {!last && (
                <span className={sep} aria-hidden="true">
                  <ChevronRight />
                </span>
              )}
            </li>
          )
        })}
      </ol>
    </nav>
  )
}

/* Bar: full width, no corners; only the bottom line separates it from the content. */
export function BarBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <BarTrail
      className={className}
      size={size}
      items={items}
      barClassName="w-full border-b border-border bg-background"
    />
  )
}

/* Card: a rounded card with a shadow; the trail sits on a surface. */
export function CardBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <BarTrail
      className={className}
      size={size}
      items={items}
      barClassName={cn(radius[size], "w-fit border border-border bg-card text-card-foreground shadow-sm")}
    />
  )
}

/* Outline: a container with no fill; only the border draws the bounds of the trail. */
export function OutlineBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <BarTrail
      className={className}
      size={size}
      items={items}
      barClassName={cn(radius[size], "w-fit border border-border bg-transparent")}
    />
  )
}

/* Filled: dolu ikincil yuzey; kenarlik yok, kontrast dolgudan gelir. */
export function FilledBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <BarTrail
      className={className}
      size={size}
      items={items}
      barClassName={cn(radius[size], "w-fit bg-secondary text-secondary-foreground")}
    />
  )
}

/* Sticky: a bar that hangs at the top of a scrollable container. For the stickiness to work the container itself must be scrollable. */
export function StickyBreadcrumb({ className, size = "md", items = defaultItems }: Props) {
  return (
    <BarTrail
      className={className}
      size={size}
      items={items}
      barClassName="sticky top-0 z-20 w-full border-b border-[color-mix(in_oklab,var(--color-border)_80%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_85%,transparent)] supports-[backdrop-filter]:backdrop-blur-sm"
    />
  )
}