import { Slider } from "@mui/material"
import { useState } from "react"

function ProgressChange({ data }) {

    const [value, setValue] = useState(70)

    return (
        <li className="flex items-center justify-start gap-3 w-full">
            <p className="text-[#525252] text-[14px] font-normal w-[118px]">{data.label}</p>
            <Slider
                defaultValue={value}
                className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
                onChange={e => setValue(e.target.value)}
                sx={{
                    '& .MuiSlider-rail': {
                        background: '#E8E8E8',
                        opacity: '100'
                    },
                    '& .MuiSlider-track': {
                        background: '#05BA58',
                        border: 'none'
                    },
                    '& .MuiSlider-thumb': {
                        marginRight: '-21px',
                        background: '#EBEBEB',
                        border: '1px solid #05BA58 !important'
                    },
                    '& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover': {
                        boxShadow: 'none'
                    },
                }}
            />
            <p className="text-[#525252] text-[20px] font-medium w-[30px]">
                {value}
            </p>
        </li>
    )
}

export default ProgressChange