"use client"
import { Fragment } from "react"
import { usePathname } from "next/navigation"

import Link from "@/components/TempDesignSystem/Link"

import styles from "./breadcrumbs.module.css"

import type { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"

export default function ClientBreadcrumbs({ breadcrumbs, lang }: BreadcrumbsProps) {
  const pathname = usePathname()
  /** Temp solution until we can get breadcrumbs from CS */
  const path = pathname.replace(`/${lang}`, '')
  const currentBreadcrumbs = breadcrumbs?.[path]
  if (!currentBreadcrumbs?.length) {
    return null
  }

  return (
    <>
      <li className={styles.listItem}>
        <span>/</span>
      </li>
      {currentBreadcrumbs.map(breadcrumb => {
        if (breadcrumb.href) {
          return (
            <Fragment key={breadcrumb.title}>
              <li className={styles.listItem}>
                <Link className={styles.link} href={breadcrumb.href}>
                  {breadcrumb.title}
                </Link>
              </li>
              <li className={styles.listItem}>
                <span>/</span>
              </li>
            </Fragment>
          )
        }

        return (
          <li className={styles.listItem} key={breadcrumb.title}>
            <p className={styles.currentPage}>{breadcrumb.title}</p>
          </li>
        )
      })}
    </>
  )
}