import { Box, IconButton, Tabs, Typography, useMediaQuery, useTheme } from "@mui/material";
import ComplexNavText from "../../components/ComplexNavText";
import SectionWrapper from "../../components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useState } from "react";
import AccordionWrapperBasket from "./AccordionWrapper";
import CustomButton from "../../components/CustomButton";
import TotalPrice from "../../components/TotalPrice";


interface TabPanelProps {
    index: number;
    value: number;
    children?: React.ReactNode;
    mt: string;
}

function TabPanel({ index, value, children, mt }: TabPanelProps) {
    return (
        <Box
            hidden={index !== value}
            sx={{ mt }}
        >
            {children}
        </Box>
    );
}

const contentBasket = [
    ["Шаблонизатор", "Дисковое хранилище 5 гб", 1290, 390]
]

export default function BasketPage() {

    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const [tabIndex, setTabIndex] = useState<number>(0);

    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
        setTabIndex(newValue);
    }; 


    return (
        <SectionWrapper
        maxWidth="lg"
        sx={{
            mt: upMd ? "25px" : "20px",
            mb: upMd ? "70px" : "37px",
        }}
    >
        {upMd &&
            <ComplexNavText text1="Все тарифы — " text2="Корзина" />
        }
        <Box
            sx={{
                mt: "20px",
                mb: upMd ? "40px" : "20px",
                display: "flex",
                gap: "10px",
            }}
        >
            {!upMd &&
                <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
                    <ArrowBackIcon />
                </IconButton>
            }
            <Typography variant="h4">Вопросы и ответы</Typography>
        </Box>
        <TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
                <AccordionWrapperBasket
                    content={[
                        ["Шаблонизатор", "Дисковое хранилище 5 гб", 3190, 390],
                        ["Квиз конструктор ", "Подписка на месяц", 3190, 490],
                    ]}
                />
            </TabPanel>
            <TotalPrice/>
    </SectionWrapper >
    );
}