import {Box, SxProps, Theme} from "@mui/material";


interface Props {
    color: string;
    sx?: SxProps<Theme>
}

export default function Slider({color, sx}: Props) {

    return (
        <Box
            sx={{
                height: "38px",
                width: "45px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                ...sx
            }}
        >
            <svg width="47" height="19" viewBox="0 0 47 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M38 15H41C43.7614 15 46 12.7614 46 10V8C46 5.23858 43.7614 3 41 3H36M23.5 15H6C3.23858 15 1 12.7614 1 10V8C1 5.23858 3.23858 3 6 3H24.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <circle cx="30.5" cy="9.5" r="8.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
        </Box>
    );
}