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


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

    const propsSx = props.sx;
    delete props.sx;

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