import { IconPlus } from "@tabler/icons-react";
import { Group, Stack, Text } from "@mantine/core";
import FooterClickable from "@/components/layout/Footer/FooterClickable";
import styles from "./Footer.module.css";

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

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

const FooterButtons = ({ buttonsData }: Props) => {
    return (
        <Group
            className={styles.container}
            p={"xs"}
            wrap={"nowrap"}
            justify={"space-between"}>
            {buttonsData.map(data => (
                <FooterClickable
                    href={data.href}
                    key={data.label}>
                    <Stack
                        gap={0}
                        align={"center"}>
                        <data.icon />
                        <Text>{data.label}</Text>
                    </Stack>
                </FooterClickable>
            ))}
        </Group>
    );
};

export default FooterButtons;