import {Box, IconButton, Typography, useTheme} from "@mui/material";
import {ArrowDownIcon} from "@icons/questionsPage/ArrowDownIcon";
import {useState} from "react";

export default function FunnelDetals () {
    const theme = useTheme();
    const [isExpanded, setIsExpanded] = useState<boolean>(false);
    const expandedHC = (bool: boolean) => {
        setIsExpanded(bool);
    };
    return(
        <Box sx={{
            display: "flex",
            flexDirection: "column",
            gap: "14px",
        }}>
            <Box
                sx={{display: "flex",
                    justifyContent: "space-between",}}
            >
                <Typography fontSize={"16px"}>Воронка 1</Typography>
                <IconButton
                    sx={{ padding: "0", margin: "5px" }}
                    onClick={() => expandedHC(!isExpanded)}
                >
                    <ArrowDownIcon
                        style={{
                            width: "18px",
                            color: theme.palette.brightPurple.main,
                            rotate: isExpanded ? "180deg" : undefined
                        }}
                    />
                </IconButton>
            </Box>
            {isExpanded &&
            <Box sx={{
                display: "flex",
                flexDirection: "column",
                gap: "40px",

            }}>
                <DetalItem/>
                <DetalItem/>
                <DetalItem/>
                <DetalItem/>
            </Box>
            }
        </Box>

    )
}

const DetalItem = () => {
    return(
        <Box sx={{"&:last-child div::after": { display: "none" },}}>
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    position: "relative",
                    "&::after": {
                        content: "''",
                        position: "absolute",
                        left: 0,
                        bottom: "-20px",
                        height: "1px",
                        width: "100%",
                        background: "#9A9AAF80",
                    },
                }}
            >
                <Box
                    sx={{
                        display: "flex",
                        gap: "15px",

                    }}
                >
                    <Typography> 1. </Typography>
                    <Typography>Вы немного опоздали, как поступите?</Typography>
                </Box>
                <Typography> 20%</Typography>
            </Box>
        </Box>

    )
}