import * as React from "react";
import Link from "@mui/material/Link";
import { StyledBreadcrumbs } from "./styles";
import { forwardRef } from "react";
import {MdOutlineKeyboardArrowRight} from "react-icons/md";
import { useNavigate } from "react-router-dom";

interface BreadcrumbProps {
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
  separableicon?: React.ReactNode;
  maxItems?: number;
  separator?: any;
  sx?: any;
  fontSize?: number;
  fontWeight?: number;
  breaddata?: any;
  md?:any;
}

const Breadcrumb = forwardRef(
  (
    {
      startIcon,
      fontSize=14,
      fontWeight=0,
      separator = ">",
      sx,
      endIcon,
      separableicon,
      md,
      ...other
    }: BreadcrumbProps,
    ref 
  ) => {
    const navigate = useNavigate();
    const navigateTo=(url:string)=>()=>{
      navigate(url)
     }
    return (
      <div role="presentation" >
        <StyledBreadcrumbs
          role="presentation"
          separator={separableicon ? <MdOutlineKeyboardArrowRight fontSize="medium" /> : separator}
          aria-label="breadcrumb"
          sx={{
            padding:1,
            paddingLeft:0,
            fontWeight:100,
            "& .MuiBreadcrumbs-li": {
              ":hover": {
                fontWeight:450,
              },
            },
          }}
          {...other}
        >
          {other.breaddata?.map((item: any,index:any) => {
            return (
              <Link
                key={index}
                underline="none"
                sx={{ display: "flex", alignItems: "center",cursor:'pointer',...sx}}
                color={other.breaddata.length === index+1 ? "inherit" :'#464a4f'}
                fontSize={fontSize}
                fontWeight={fontWeight}
                onClick={navigateTo(item?.url as string)}
              >
                {startIcon && item.startIcon}
                {item.name}
                {endIcon &&  item.startIcon}
              </Link>              
            );
          })}
        </StyledBreadcrumbs>
      </div>
    );
  }
);
export default Breadcrumb;