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

import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

import CustomButton from "@components/CustomButton";
import SectionWrapper from "@components/SectionWrapper";
import ComplexNavText from "@components/ComplexNavText";
import PaymentMethodCard from "./PaymentMethodCard";

import mastercardLogo from "../../assets/bank-logo/logo-mastercard.png";
import visaLogo from "../../assets/bank-logo/logo-visa.png";
import qiwiLogo from "../../assets/bank-logo/logo-qiwi.png";
import mirLogo from "../../assets/bank-logo/logo-mir.png";
import tinkoffLogo from "../../assets/bank-logo/logo-tinkoff.png";
import { cardShadow } from "@root/utils/themes/shadow";

export default function Payment() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const upSm = useMediaQuery(theme.breakpoints.up("sm"));

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: "25px",
        mb: "70px",
      }}
    >
      {upMd && <ComplexNavText text1="Все тарифы — " text2="Способ оплаты" />}
      <Box
        sx={{
          mt: "20px",
          mb: "40px",
          display: "flex",
          gap: "10px",
        }}
      >
        {!upMd && (
          <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
            <ArrowBackIcon />
          </IconButton>
        )}
        <Typography variant="h4">Способ оплаты</Typography>
      </Box>
      {!upMd && (
        <Typography variant="body2" mb="30px">
          Выберите способ оплаты
        </Typography>
      )}
      <Box
        sx={{
          backgroundColor: upMd ? "white" : undefined,
          display: "flex",
          flexDirection: upMd ? "row" : "column",
          borderRadius: "12px",
          boxShadow: upMd
            ? cardShadow
            : undefined,
        }}
      >
        <Box
          sx={{
            width: upMd ? "68.5%" : undefined,
            p: upMd ? "20px" : undefined,
            display: "flex",
            flexDirection: upSm ? "row" : "column",
            flexWrap: "wrap",
            gap: upMd ? "14px" : "20px",
          }}
        >
          <PaymentMethodCard name="Mastercard" image={mastercardLogo} />
          <PaymentMethodCard name="Visa" image={visaLogo} />
          <PaymentMethodCard name="QIWI Кошелек" image={qiwiLogo} />
          <PaymentMethodCard name="Мир" image={mirLogo} />
          <PaymentMethodCard name="Тинькофф" image={tinkoffLogo} />
        </Box>
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "start",
            color: theme.palette.grey3.main,
            width: upMd ? "31.5%" : undefined,
            p: upMd ? "20px" : undefined,
            pl: upMd ? "33px" : undefined,
            mt: upMd ? undefined : "30px",
            borderLeft: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
          }}
        >
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              maxWidth: "85%",
            }}
          >
            {upMd && <Typography mb="56px">Выберите способ оплаты</Typography>}
            <Typography mb="20px">К оплате</Typography>
            <Typography
              sx={{
                fontWeight: 500,
                fontSize: "20px",
                lineHeight: "24px",
                mb: "28px",
              }}
            >
              3 190 руб.
            </Typography>
          </Box>
          <CustomButton
            variant="outlined"
            sx={{
              borderColor: theme.palette.brightPurple.main,
              mt: "auto",
            }}
          >
            Выбрать
          </CustomButton>
        </Box>
      </Box>
    </SectionWrapper>
  );
}