// src/components/Shared/Breadcrumbs.tsx
import React from "react"
import { Link } from "react-router-dom"
import { ChevronRight, Home } from "lucide-react"

type BreadcrumbItem = {
  id: number
  name: string
  slug: string
}

export default function Breadcrumbs({
  breadcrumb = [],
  currentLabel,
  showHome = true,
  className = "",
}: {
  breadcrumb?: BreadcrumbItem[]
  currentLabel?: string
  showHome?: boolean
  className?: string
}) {
  const items = Array.isArray(breadcrumb) ? breadcrumb : []
  if (!showHome && items.length === 0 && !currentLabel) return null

  return (
    <nav
      aria-label="Breadcrumb"
      className={["w-full border-b border-white/5 bg-background/40 backdrop-blur", className].join(
        " "
      )}
    >
      <div className="max-w-[1400px] mx-auto px-4 py-2">
        <ol className="flex items-center gap-1 text-sm text-text-muted overflow-x-auto whitespace-nowrap">
          {showHome && (
            <li className="flex items-center">
              <Link
                to="/"
                className="inline-flex items-center gap-1 px-2 py-1 rounded-lg hover:bg-white/5 hover:text-text transition"
              >
                <Home className="w-4 h-4" />
                <span>Anasayfa</span>
              </Link>
              <ChevronRight className="w-4 h-4 opacity-60" />
            </li>
          )}

          {items.map((c, idx) => {
            const isLastFromBreadcrumb = idx === items.length - 1 && !currentLabel
            const to = `/category/${c.slug}`
            
            return (
              <li key={c.id ?? `${c.slug}-${idx}`} className="flex items-center">
                {!isLastFromBreadcrumb ? (
                  <Link
                    to={to}
                    className="px-2 py-1 rounded-lg hover:bg-white/5 hover:text-text transition"
                  >
                    {c.name}
                  </Link>
                ) : (
                  <span className="px-2 py-1 text-text font-semibold">{c.name}</span>
                )}
                <ChevronRight className="w-4 h-4 opacity-60" />
              </li>
            )
          })}

          {currentLabel && (
            <li className="flex items-center">
              <span className="px-2 py-1 text-text font-semibold">{currentLabel}</span>
            </li>
          )}
        </ol>
      </div>
    </nav>
  )
}
