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


interface Props {
    bgcolor: string;
}

export default function MobilePhoneIcon({ bgcolor }: Props) {
    const theme = useTheme();

    return (
        <Box
            sx={{
                height: "36px",
                width: "36px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: bgcolor,
                borderRadius: "6px",
            }}
        >
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M16.5 2.25H7.5C6.67157 2.25 6 2.92157 6 3.75V20.25C6 21.0784 6.67157 21.75 7.5 21.75H16.5C17.3284 21.75 18 21.0784 18 20.25V3.75C18 2.92157 17.3284 2.25 16.5 2.25Z" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M6 5.25H18" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M6 18.75H18" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
        </Box>
    );
}