"use client";
/* 
  This is the breadcrumb component.
  It contains the following components:
  - Breadcrumb
*/
import { AppDispatch, RootState } from "@/redux/slices";
import { commonActions } from "@/redux/slices/Common/commonSlice";
import Link from "next/link";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import styles from "./Breadcrumb.module.scss";

// Define the props for the Breadcrumb item
type BreadcrumbItem = {
  Link?: string;
  LinkUrl?: string | (() => void);
  ActiveLink?: string;
};

// Define the props for the Breadcrumb list
type BreadcrumbProps = {
  content: BreadcrumbItem[];
};

const Breadcrumb: React.FC<BreadcrumbProps> = ({ content }) => {

  const dispatch = useDispatch<AppDispatch>();
  const { isBookingFlow } = useSelector((state: RootState) => state.common);

  const handleClick = (e: React.MouseEvent, url: string) => {
    if (isBookingFlow) {
      e.preventDefault();
      dispatch(commonActions.afterDraftedNavigation(url))
      dispatch(commonActions.draftedModal(true));
    }
  }

  return (
    <>
      <ul className={`${styles.BreadcrumbWrapper} flex flex-wrap gap-2 items-center fs-14 sm:fs-16 list-none py-6 px-0 !mb-0`}>
        {content.map((item: BreadcrumbItem, index: number) => (
          <React.Fragment key={index}>
            <li className={`${item.ActiveLink ? styles.ActivePageLink : ""}`}>
              {typeof item.LinkUrl === "string" ? (
                <Link
                  onClick={(e) => {
                    //@ts-ignore
                    handleClick(e, item?.LinkUrl)
                  }}
                  href={isBookingFlow ? "#" : item.LinkUrl}>{item.Link}</Link>
              ) : typeof item.LinkUrl === "function" ? (
                <span className="breadcrumb-link" onClick={item.LinkUrl}>
                  {item.Link}
                </span>
              ) : (
                item.ActiveLink
              )}
            </li>
          </React.Fragment>
        ))}
      </ul >
    </>
  );
};

export default Breadcrumb;