frontPanel/src/pages/Questions/RatingOptions/RatingOptions.tsx

import {Box, Typography, useTheme} from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import React from "react";
import Rating from '@mui/material/Rating';
import RatingStar from "../../../assets/icons/questionsPage/ratingStar";
import SwitchRating from "./switchRating";

interface Props{
    totalIndex: number
}

export default function RatingOptions({totalIndex}: Props) {
    const theme = useTheme();
    const [switchState, setSwitchState] = React.useState('setting');
    const SSHC = (data: string) => {
        setSwitchState(data)
    }
    return (
        <>
            <Box
                sx={{
                    width: '100%',
                    maxWidth: '310px',
                    display: 'flex',
                    padding: '20px',
                    flexDirection: 'column',
                    gap: '20px'}}
            >
                <Rating
                    name="customized-color"
                    defaultValue={2}
                    getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
                    precision={1}
                    icon={<RatingStar color={theme.palette.brightPurple.main}/>}
                    emptyIcon={<RatingStar color={"#9A9AAF"}/>}
                    sx={{display: 'flex', gap: '15px'}}
                />
                <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
                    <Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Негативно</Typography>
                    <Typography sx={{color: theme.palette.grey2.main, fontSize: '16px', fontWeight: 400}}>Позитивно</Typography>
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex}/>
            <SwitchRating switchState={switchState}/>
        </>
    )
}