import { IconPlus } from "@tabler/icons-react";
import { Stack, Tooltip } from "@mantine/core";
import NavbarClickable from "./NavbarClickable";

type LinkData = {
    icon: typeof IconPlus;
    label: string;
    href: string;
};

type Props = {
    linksData: LinkData[];
};

const NavbarLinks = ({ linksData }: Props) => {
    return (
        <Stack gap={"xs"}>
            {linksData.map((linkData, index) => (
                <Tooltip
                    key={index}
                    display={!linkData.label ? "none" : "flex"}
                    label={linkData.label}
                    position="right"
                    transitionProps={{ duration: 0 }}>
                    <NavbarClickable
                        href={linkData.href}
                        key={linkData.label}>
                        <linkData.icon />
                    </NavbarClickable>
                </Tooltip>
            ))}
        </Stack>
    );
};

export default NavbarLinks;
