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

interface Props {
  color: string;
  backgroundColor: string
}

export default function PhoneIcon({ color, backgroundColor }: Props) {
  return (
    <Box
      sx={{
        // height: "38px",
        // width: "24px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "58px",
        width: "42px",
        backgroundColor: {backgroundColor},
        borderBottomLeftRadius: "12px",
        borderTopLeftRadius: "12px",
      }}
    >
        <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.6893 15.0369C12.2537 16.4725 8.57727 15.1236 5.47772 12.024C2.37818 8.9245 1.02926 5.24806 2.46484 3.81247L3.41006 2.86725C4.06259 2.21472 5.13781 2.23197 5.81163 2.90578L7.27569 4.36984C7.9495 5.04365 7.96675 6.11888 7.31421 6.77141L7.11119 6.97443C6.75888 7.32675 6.72441 7.8951 7.05178 8.29181C7.36754 8.67446 7.70796 9.0556 8.07707 9.4247C8.44617 9.7938 8.82731 10.1342 9.20996 10.45C9.60666 10.7774 10.175 10.7429 10.5273 10.3906L10.7304 10.1875C11.3829 9.53501 12.4581 9.55226 13.1319 10.2261L14.596 11.6901C15.2698 12.364 15.287 13.4392 14.6345 14.0917L13.6893 15.0369Z" stroke="#9A9AAF" strokeWidth="1.5"/>
        </svg>
    </Box>
  );
}
