front-hub/src/pages/Payment/PaymentMethodCard.tsx

import { Button, Typography, useMediaQuery, useTheme } from "@mui/material";

interface Props {
    name: string;
    image: string;
    isSelected?: boolean;
    onClick: () => void;
}

export default function PaymentMethodCard({ name, image, isSelected, onClick }: Props) {
    const theme = useTheme();
    const upSm = useMediaQuery(theme.breakpoints.up("sm"));

    return (
        <Button
            sx={{
                width: upSm ? "237px" : "100%",
                p: "20px",
                pr: "10px",
                display: "flex",
                justifyContent: "start",
                borderRadius: "8px",
                backgroundColor: theme.palette.background.default,
                border: isSelected ? `1px solid ${theme.palette.purple.dark}` : `1px solid ${theme.palette.gray.main}`,
                gap: "20px",
                alignItems: "center",
                flexWrap: "wrap",
                boxShadow: isSelected ? `0 0 0 1.5px ${theme.palette.purple.dark};` : "none",
                "&:hover": {
                    backgroundColor: theme.palette.purple.dark,
                    border: `1px solid ${theme.palette.purple.dark}`,
                    "& > p": {
                        color: "white",
                    }
                },
            }}
            onClick={onClick}
        >
            <img src={image} alt="payment method" />
            <Typography sx={{ color: theme.palette.gray.dark }}>{name}</Typography>
        </Button>
    );
}