"use client";
/* 
  This is the breadcrumb component.
  It contains the following components:
  - Breadcrumb
*/
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import React from "react";
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 ViewPropertyBreadcrumb: React.FC<BreadcrumbProps> = ({ content }) => {
  const searchParams = useSearchParams();
  // Get the full query string from the URL
  const fullQueryString = searchParams.toString();
  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" ? (
                item.Link === 'Find a home' ?
                  <Link href={`${item.LinkUrl}?${fullQueryString}`}>{item.Link}</Link>
                  :
                  <Link href={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 ViewPropertyBreadcrumb;