import { Box } from "@mui/material";


interface Props {
    color: string;
}

export default function RDownButton({ color }: Props) {

    return (
        <Box
            sx={{
                height: "130px",
                width: "200px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
            }}
        >
            <svg width="204" height="134" viewBox="0 0 204 134" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="1.25" y="1.25" width="201.5" height="131.5" rx="6.75" stroke={color} strokeWidth="1.5"/>
                <rect x="147.5" y="62.5" width="49" height="64" rx="3.5" fill={color} stroke={color}/>
                <path d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z" fill="#F2F3F7" stroke={color} strokeWidth="1.5"/>
                <circle cx="169.5" cy="8" r="2.5" fill={color}/>
                <circle cx="177.5" cy="8" r="2.5" fill={color}/>
                <circle cx="185.5" cy="8" r="2.5" fill={color}/>
            </svg>
        </Box>
    );
}