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

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


interface Props {
    name: string;
    image: any;
}

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

    return (
        <Box
            sx={{
                width: upSm ? "237px" : "100%",
                p: "20px",
                pr: "10px",
                display: "flex",
                borderRadius: "8px",
                backgroundColor: "#F2F3F7",
                border: `1px solid ${theme.palette.grey2.main}`,
                gap: "20px",
                alignItems: "center",
                flexWrap: "wrap",
            }}
        >
            <img src={image} alt="payment method" />
            <Typography sx={{ color: theme.palette.grey3.main }}>{name}</Typography>
        </Box>
    );
}