import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
import { Slash } from "lucide-react"
import Link from "next/link"
import { Fragment } from "react"
import TranslateClient from "./localization/TranslateClient"
type Crumb = {
  crumb: {
    path: string
    label: string
  }[]
  title: string
}

const Crumb = ({ crumb, title }: Crumb) => {
  return (
    <div className="center capitalize text-white">
      <Breadcrumb>
        <BreadcrumbList className="flex justify-center">
          {crumb?.map((item, index) => (
            <Fragment key={index}>
              <BreadcrumbItem>
                <Link href={item?.path}>{item?.label}</Link>
              </BreadcrumbItem>
              <BreadcrumbSeparator hidden={crumb?.length === index + 1}>
                <Slash />
              </BreadcrumbSeparator>
            </Fragment>
          ))}
        </BreadcrumbList>
      </Breadcrumb>
      <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-center mt-6">
        <TranslateClient text={title} />
      </h2>
    </div>
  )
}

export default Crumb