import { Link, LinkProps, Typography, useTheme } from "@mui/material";
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import { deepmerge } from "@mui/utils";


export function PenaLink(props: LinkProps) {
    const theme = useTheme();

    return (
        <Link
            {...deepmerge({
                sx: {
                    display: "flex",
                    gap: "3px",
                    textUnderlinePosition: "under",
                    color: theme.palette.purple.main,
                    textDecorationColor: theme.palette.purple.main,
                    textUnderlineOffset: "3px",
                    "&:active": {
                        color: "#FFFFFF",
                    },
                }
            }, props)}
        >
            <Typography variant="body2">{props.children}</Typography>
            <ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />
        </Link>
    );
}