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

interface Props {
  color: string;
  backgroundColor: string
}

export default function NameIcon({ color, backgroundColor }: Props) {
  return (
    <Box
      sx={{
        // height: "38px",
        // width: "45px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "58px",
        width: "42px",
        backgroundColor: {backgroundColor},
        borderBottomLeftRadius: "12px",
        borderTopLeftRadius: "12px",
      }}
    >
      <svg
        width="13"
        height="13"
        viewBox="0 0 13 13"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6.5 8.375C8.57107 8.375 10.25 6.69607 10.25 4.625C10.25 2.55393 8.57107 0.875 6.5 0.875C4.42893 0.875 2.75 2.55393 2.75 4.625C2.75 6.69607 4.42893 8.375 6.5 8.375Z"
          stroke={color}
          strokeMiterlimit="10"
        />
        <path
          d="M0.8125 11.6568C1.38844 10.659 2.21689 9.83044 3.21458 9.25436C4.21227 8.67828 5.34403 8.375 6.49609 8.375C7.64816 8.375 8.77992 8.67828 9.77761 9.25436C10.7753 9.83044 11.6037 10.659 12.1797 11.6568"
          stroke={color}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M0.765625 11.6914H11.9866"
          stroke={color}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </Box>
  );
}
