import { Box, Typography, useTheme } from "@mui/material";
import UnderlinedLink from "./UnderlinedLink";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import Button from "./Button";


interface Props {
    image: string;
    headerText: string;
    text: string;
    linkHref: string;
    isHighlighted?: boolean;
    height: string;
    width: string;
    buttonType: "link" | "button";
    shadowType: "dark" | "light";
}

export default function CardWithLink({
    image,
    headerText,
    text,
    linkHref,
    isHighlighted = false,
    height,
    width,
    buttonType,
    shadowType
}: Props) {
    const theme = useTheme();

    const boxShadow: string = shadowType === "dark" ?
        `0px 100px 309px rgba(37, 39, 52, 0.24),
        0px 41.7776px 129.093px rgba(37, 39, 52, 0.172525),
        0px 22.3363px 69.0192px rgba(37, 39, 52, 0.143066),
        0px 12.5216px 38.6916px rgba(37, 39, 52, 0.12),
        0px 6.6501px 20.5488px rgba(37, 39, 52, 0.0969343),
        0px 2.76726px 8.55082px rgba(37, 39, 52, 0.0674749)`
        :
        `0px 100px 80px rgba(126, 42, 234, 0.07),
         0px 41.7776px 33.4221px rgba(126, 42, 234, 0.0503198),
         0px 22.3363px 17.869px rgba(126, 42, 234, 0.0417275), 
         0px 12.5216px 10.0172px rgba(126, 42, 234, 0.035),
         0px 6.6501px 5.32008px rgba(126, 42, 234, 0.0282725),
         0px 2.76726px 2.21381px rgba(126, 42, 234, 0.0196802)`;

    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: "column",
                flexGrow: 1,
                alignItems: "start",
                p: "20px",
                maxWidth: "360px",
                width,
                height,
                backgroundColor: isHighlighted ? theme.palette.custom.brightPurple.main : theme.palette.custom.grey.main,
                borderRadius: "12px",
                color: "white",
                boxShadow,
            }}
        >
            <Box sx={{
                alignSelf: "center",
                backgroundImage: `url(${image})`,
                width: "100%",
                height: "100%",
                maxHeight: "196px",
                flexGrow: 1,
                backgroundSize: "contain",
                backgroundRepeat: "no-repeat",
                backgroundPosition: "center",
            }} />
            <Typography variant="h5" sx={{ my: "12px" }}>{headerText}</Typography>
            <Typography>{text}</Typography>
            {buttonType === "link" ?
                <UnderlinedLink
                    linkHref={linkHref}
                    text="Подробнее"
                    endIcon={<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />}
                    isHighlighted={isHighlighted}
                    sx={{
                        mt: "auto",
                        mb: "15px",
                    }}
                />
                :
                <Button
                    variant="contained"
                    sx={{
                        backgroundColor: "white",
                        color: theme.palette.primary.main,
                        mt: "auto",
                        "&:hover": {
                            backgroundColor: "#dddddd",
                        }
                    }}
                >
                    Подробнее
                </Button>
            }
        </Box >
    );
}