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

import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import SectionWrapper from "../../components/SectionWrapper";
import PaymentMethodCard from "./PaymentMethodCard";
import mastercardLogo from "../../assets/logo-mastercard.png";
import visaLogo from "../../assets/logo-visa.png";
import qiwiLogo from "../../assets/logo-qiwi.png";
import mirLogo from "../../assets/logo-mir.png";
import tinkoffLogo from "../../assets/logo-tinkoff.png";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ComplexNavText from "../../components/ComplexNavText";


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 ? `0px 100px 309px rgba(210, 208, 225, 0.24), 
                                0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                                0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
                                0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 
                                0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
                                0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`
                        :
                        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>
    );
}