import React from "react";
import "./Breadcrumb_comp.css";
import Breadcrumb from "react-bootstrap/Breadcrumb";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faChevronLeft,
  faChevronRight,
} from "@fortawesome/free-solid-svg-icons";

import { useRouter } from "next/navigation";

const Breadcrumb_comp = ({ breadcrumbs, additionalClass }) => {
  const navigate = useRouter();

  const handleSelect = (href) => {
    navigate.push(href);
  };

  return (
    <div className="container">
      <div className="Breadcrumb_comp">
        <Breadcrumb>
          {breadcrumbs.map((breadcrumb, index) => (
            <Breadcrumb.Item
              key={index}
              href={breadcrumb.link}
              active={breadcrumb.isActive}
              className={
                breadcrumb.isActive ? `para_text ${additionalClass || ""}` : ""
              }
              onClick={(e) => {
                e.preventDefault();
                if (!breadcrumb.isActive) {
                  handleSelect(breadcrumb.link);
                }
              }}
            >
              {index > 0 && (
                <FontAwesomeIcon className="nextfafa" icon={faChevronRight} />
              )}
              {breadcrumb.label}
            </Breadcrumb.Item>
          ))}
        </Breadcrumb>
      </div>
    </div>
  );
};

export default Breadcrumb_comp;
