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


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

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

    return (
        <Box
            sx={{
                height: "38px",
                width: "45px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                ...sx
            }}
        >
            <svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M44.125 1H2.875C1.83947 1 1 1.20147 1 1.45V9.55C1 9.79853 1.83947 10 2.875 10H44.125C45.1605 10 46 9.79853 46 9.55V1.45C46 1.20147 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M5 16H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M5 27.333H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M5 21.667H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M5 33H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M34 9L34 1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M38 5L40 7L42 5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
        </Box>
    );
}