import { FC } from "react";
import Link from "next/link";
import { Button, Stack, Text } from "@mantine/core";
import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
import LinkData from "@/types/LinkData";
import styles from "./Action.module.css";

type Props = {
    linkData: LinkData;
};

const Action: FC<Props> = ({ linkData }) => {
    return (
        <Link
            href={linkData.href}
            className={styles.link}>
            <Button
                w={"100%"}
                h={"100px"}
                variant={"default"}>
                <Stack
                    px={"xs"}
                    w={"100%"}
                    align={"center"}
                    gap={"xs"}>
                    <ThemeIcon size={"sm"}>
                        <linkData.icon />
                    </ThemeIcon>
                    <Text>{linkData.label}</Text>
                </Stack>
            </Button>
        </Link>
    );
};

export default Action;