import {Box, IconButton, Paper} from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import OneIcon from "@icons/questionsPage/OneIcon";
import PointsIcon from "@icons/questionsPage/PointsIcon";
import TypeQuestions from "./TypeQuestions";
import SwitchQuestionsPage from "./SwitchQuestionsPage";
import React from "react";

interface Props {
    switchState: string;
    SSHC: (data: string) => void;
}

export default function QuestionsPageCard({ SSHC, switchState }: Props) {
    return (
        <Paper sx={{ maxWidth: "796px", width: "100%", borderRadius: "12px", margin: "20px 0" }}>
            <Box
                sx={{ width: "100%", maxWidth: "760px", display: "flex", alignItems: "center", gap: "10px", padding: "20px" }}
            >
                <CustomTextField placeholder="Заголовок вопроса" text={""} />
                <IconButton>
                    {" "}
                    <ExpandMoreIcon />{" "}
                </IconButton>
                <OneIcon />
                <PointsIcon />
            </Box>

            <Box sx={{ display: "flex", flexDirection: "column", padding: 0, borderRadius: "12px" }}>
                {switchState.length === 0 ?
                    <TypeQuestions switchState={switchState} SSHC={SSHC}/>
                    :
                    <SwitchQuestionsPage switchState={switchState}/>}
            </Box>
        </Paper>

    )
}