import React, { FC } from "react";
import { Grid, Icon, Breadcrumbs } from "@mui/material";
import "./styles.scss";
import { Types } from "./types";

export const Breadcrumb:FC<Types> = ({ links, navigate = (e: string) => {} }) => {

  return (
    <Breadcrumbs aria-label="breadcrumb">
      {links &&
        links?.length &&
        links.map((link, key: number) => {
          let nav;
          if (key >= links.length - 1) {
            nav = (
              <span className="gtc-rc-nav-title" key={key}>
                {link.title}
              </span>
            );
          } else {
            nav = (
              <Grid
                key={key}
                container
                spacing={0}
                direction="row"
                justifyContent="space-between"
                alignItems="center"
                onClick={() => {
                  if (navigate) {
                    if(link?.link){
                      navigate(link.link)
                    }
                  }
                }}
              >
                {key === 0 && (
                  <Icon className="gtc-rc-nav-arrow-back gtc-rc-cursor-pointer">
                    arrow_back
                  </Icon>
                )}

                <Grid item xs>
                  <span className="gtc-rc-nav-link gtc-rc-cursor-pointer">{link.title}</span>
                </Grid>
              </Grid>
            );
          }

          return nav;
        })}
    </Breadcrumbs>
  );
};
