import { Group, Stack, Text } from "@mantine/core";
import FooterClickable from "@/components/layout/Footer/components/FooterClickable";
import buttonsData from "@/components/layout/Footer/data/buttonsData";
import styles from "./Footer.module.css";

const Footer = () => {
    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 Footer;
