"use client"

import classNames from "classnames"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faAngleLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons"
import { Link } from "@/i18n/routing"
import React from "react"

export interface ItemsHead {
  title: string
  href?: string
  className?: string
  aria_label?: string
  classChevron?: string
}

type IProps = {
  className?: string
  slot?: React.ReactNode
  items?: Array<ItemsHead>
  subtitle?: string | React.ReactNode
  showButton?: boolean
  classNameContent?: string
}

export default function HeaderBreadcrumb({ className, slot, items, subtitle, showButton = true, classNameContent }: IProps) {
  return (
    <div className={classNames(className || "", "flex items-center justify-between p-4 border-b border-[var(--secondary-20)] w-full")}>
      <div className={`overflow-x-hidden w-full line-clamp-1 ${classNameContent || ""}`}>
        <div className="flex items-center overflow-hidden text-ellipsis whitespace-nowrap h-8 md:h-10">
          {items?.map((item, index) => (
            <React.Fragment key={index}>
              <Link
                aria-label={item?.aria_label || item?.title}
                href={item?.href || "#"}
                scroll={item?.href && item?.href !== "#" ? true : false}
                className={classNames("flex justify-center items-center group", item?.className || "", !item?.href || item?.href === "#" ? "cursor-text" : "")}>
                {index === 0 && showButton && (
                  <span className="text-[var(--secondary-100)] w-[30px] h-[30px] md:w-[38px] md:h-[38px] bg-[var(--secondary-10)] rounded-lg border border-solid border-[var(--black--color-4)] flex justify-center items-center mr-2 group-hover:border-[var(--primary--70)] group-hover:text-[--primary--70]">
                    <FontAwesomeIcon icon={faAngleLeft} />
                  </span>
                )}
                <span
                  className={`whitespace-nowrap text-base md:text-lg lg:text-xl xl:text-2xl text-[var(--secondary-100)] leading-[30px] ${
                    item?.href && item?.href !== "#" ? "underline font-light group-hover:text-[--primary--70]" : "no-underline font-bold"
                  }`}>
                  {item?.title}
                </span>
              </Link>
              {items.length > 1 && index < items.length - 1 && (
                <span className={`px-4 text-base md:text-lg lg:text-xl xl:text-2xl ${item?.classChevron}`}>
                  <FontAwesomeIcon icon={faChevronRight} />
                </span>
              )}
            </React.Fragment>
          ))}
        </div>
        {subtitle &&
          (typeof subtitle === "string" ? (
            <div
              className="text-[var(--secondary-60)] md:text-base pt-2"
              dangerouslySetInnerHTML={{ __html: subtitle }}></div>
          ) : (
            <div className="text-[var(--secondary-60)] md:text-base pt-2">{subtitle}</div>
          ))}
      </div>
      {slot}
    </div>
  )
}