"use client"

import Link from "next/link"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

interface PageBreadcrumbProps {
  category: "foundation" | "components" | "blocks"
  sectionName: string
  sectionId: string
}

const categoryConfig = {
  foundation: {
    name: "Foundation",
    href: "/foundation",
  },
  components: {
    name: "Components",
    href: "/components",
  },
  blocks: {
    name: "Blocks",
    href: "/blocks",
  },
}

export function PageBreadcrumb({ category, sectionName, sectionId }: PageBreadcrumbProps) {
  const categoryInfo = categoryConfig[category]

  return (
    <Breadcrumb>
      <BreadcrumbList className="flex items-center text-sm">
        <BreadcrumbItem>
          <BreadcrumbLink asChild className="text-muted-foreground hover:text-foreground">
            <Link href="/">Home</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator className="text-muted-foreground" />
        <BreadcrumbItem>
          <BreadcrumbLink asChild className="text-muted-foreground hover:text-foreground">
            <Link href={categoryInfo.href}>{categoryInfo.name}</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator className="text-muted-foreground" />
        <BreadcrumbItem>
          <BreadcrumbPage className="text-foreground font-medium">{sectionName}</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}