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

import CustomButton from "./CustomButton";

export default function TotalPrice() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    return (
        <Box
                sx={{
                    display: "flex",
                    flexDirection: upMd ? "row" : "column",
                    mt: upMd ? "80px" : "70px",
                    pt: upMd ? "30px" : undefined,
                    borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
                }}
            >
                <Box
                    sx={{
                        width: upMd ? "68.5%" : undefined,
                        pr: upMd ? "15%" : undefined,
                        display: "flex",
                        flexWrap: "wrap",
                        flexDirection: "column",
                    }}
                >
                    <Typography
                        variant="h4"
                        mb={upMd ? "18px" : "30px"}
                    >Итоговая цена</Typography>
                    <Typography color={theme.palette.grey3.main}>Текст-заполнитель —
                        это текст, который имеет Текст-заполнитель —
                        это текст, который имеет Текст-заполнитель —
                        это текст, который имеет Текст-заполнитель —
                        это текст, который имеет Текст-заполнитель</Typography>
                </Box>
                <Box
                    sx={{
                        color: theme.palette.grey3.main,
                        width: upMd ? "31.5%" : undefined,
                        pl: upMd ? "33px" : undefined,
                    }}
                >
                    <Box
                        sx={{
                            display: "flex",
                            flexDirection: upMd ? "column" : "row",
                            alignItems: upMd ? "start" : "center",
                            mt: upMd ? "10px" : "30px",
                            gap: "15px",
                        }}
                    >
                        <Typography
                            color={theme.palette.orange.main}
                            sx={{
                                textDecoration: "line-through",
                                order: upMd ? 1 : 2,
                            }}
                        >20 190  руб.</Typography>
                        <Typography
                            variant="p1"
                            sx={{
                                fontWeight: 500,
                                fontSize: "26px",
                                lineHeight: "31px",
                                order: upMd ? 2 : 1,
                            }}
                        >6 380  руб.</Typography>
                    </Box>
                    <CustomButton
                        variant="contained"
                        sx={{
                            mt: "25px",
                            backgroundColor: theme.palette.brightPurple.main,
                        }}
                    >Выбрать</CustomButton>
                </Box>
            </Box>
    )
}