"use client";
import { useRouter } from "next/navigation";
import style from "./Location.module.css";
import { useLocationStore } from "@store/Location.Store";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Link from "@mui/material/Link";
import HomeIcon from "@mui/icons-material/Home";

export interface LocationProps {
    bottomSeperation?: string;
}

export default function Location(props: LocationProps) {
    const { bottomSeperation = "55px" } = props;
    const router = useRouter();
    const location = useLocationStore();

    const goTo = (path: string) => {
        router.push(path);
    };

    return (
        <>
            <div className={style.locationContainer}>
                <div role="presentation">
                    <Breadcrumbs key={"breadcrumb"} aria-label="breadcrumb">
                        {location.path.slice(0, -1).map((item, index) => (
                            //si es el ultimo elemento no mostrar el icono

                            <Link
                                key={"link" + index}
                                underline="hover"
                                sx={{ display: "flex", alignItems: "center", cursor: "pointer" }}
                                color="inherit"
                                onClick={() => goTo(item.url)}
                            >
                                {index == 0 && (
                                    <HomeIcon
                                        key={"icon" + index}
                                        sx={{ mr: 0.5 }}
                                        fontSize="inherit"
                                    />
                                )}
                                {index != 0 && item.icon}

                                {item.title}
                            </Link>
                        ))}
                    </Breadcrumbs>
                </div>
                <div className={style.locationTitle}>
                    {location.last()?.icon}
                    <h1>{location.last()?.title}</h1>
                </div>
            </div>
            <div
                style={{
                    height: bottomSeperation,
                    minHeight: bottomSeperation,
                }}
            >
                &nbsp;
            </div>
        </>
    );
}
