"use client"

import { ChevronRight } from "lucide-react"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import { ComponentContainer } from "@/components/ui/component-container"
import { SectionHeading } from "@/components/ui/section-heading"

export function BreadcrumbsSection() {
  const { selectedMaterial } = useMaterial()
  // Remove the reference to getThemeAwareClass since it doesn't exist
  // Instead, we'll use a simple class based on the material
  const materialClass = selectedMaterial ? selectedMaterial.cssClass : ""

  const breadcrumbsCode = `<nav className="flex">
  <ol className="flex items-center space-x-2">
    <li>
      <a href="#" className="text-muted-foreground hover:text-foreground">
        Home
      </a>
    </li>
    <li className="text-muted-foreground">
      <ChevronRight className="h-4 w-4" />
    </li>
    <li>
      <a href="#" className="text-muted-foreground hover:text-foreground">
        Products
      </a>
    </li>
    <li className="text-muted-foreground">
      <ChevronRight className="h-4 w-4" />
    </li>
    <li>
      <a href="#" className="text-foreground font-medium">
        Category
      </a>
    </li>
  </ol>
</nav>`

  return (
    <section id="breadcrumbs" className="scroll-mt-16">
      <SectionHeading title="Breadcrumb" className="mb-8" />

      <ComponentContainer
        title="Default Breadcrumbs"
        description="A navigation component that helps users understand their location within a website."
        code={breadcrumbsCode}
      >
        <nav className={cn("flex", materialClass)}>
          <ol className="flex items-center space-x-2">
            <li>
              <a href="#" className="text-muted-foreground hover:text-foreground">
                Home
              </a>
            </li>
            <li className="text-muted-foreground">
              <ChevronRight className="h-4 w-4" />
            </li>
            <li>
              <a href="#" className="text-muted-foreground hover:text-foreground">
                Products
              </a>
            </li>
            <li className="text-muted-foreground">
              <ChevronRight className="h-4 w-4" />
            </li>
            <li>
              <a href="#" className="text-foreground font-medium">
                Category
              </a>
            </li>
          </ol>
        </nav>
      </ComponentContainer>
    </section>
  )
}
