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

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

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

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: theme.palette.background.default,
        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>
  );
}