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

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


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

export default function PaymentMethodCard({ name, image }: Props) {
    const theme = useTheme();

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