import { FC } from 'react'

import { SvgIcon, SvgIconProps } from '@mui/material'

const AvatarUploadFallbackIcon: FC<SvgIconProps> = ({ sx, ...props }) => (
  <SvgIcon sx={{ fontSize: 128, color: 'action.active', ...sx }} {...props}>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="128"
      height="128"
      viewBox="0 0 128 128"
      fill="none"
    >
      <path
        d="M0 64C0 28.6538 28.6538 0 64 0C99.3462 0 128 28.6538 128 64C128 99.3462 99.3462 128 64 128C28.6538 128 0 99.3462 0 64Z"
        fill="rgba(145, 158, 171, 0.2)"
        fillOpacity="0.2"
      />
      <path
        d="M63.5 63.7334C65.9 63.7334 67.7667 61.7334 67.7667 59.4667C67.7667 57.2 65.9 54.9333 63.5 54.9333C61.1 54.9333 59.2334 56.9334 59.2334 59.3334C59.2334 61.7333 61.1 63.7334 63.5 63.7334ZM63.5 57.0667C64.8334 57.0667 65.9 58.1334 65.9 59.4667C65.9 60.8 64.8334 61.6 63.5 61.6C62.1667 61.6 61.1 60.5333 61.1 59.2C61.1 57.8667 62.1667 57.0667 63.5 57.0667Z"
        fill="#637381"
      />
      <path
        d="M72.8333 50.9333H54.1667C52.1667 50.9333 50.4333 52.6667 50.4333 54.6667V73.3333C50.4333 75.3333 52.0333 77.0667 54.1667 77.0667H72.8333C74.8333 77.0667 76.5667 75.4667 76.5667 73.3333V54.6667C76.5667 52.6667 74.8333 50.9333 72.8333 50.9333ZM54.1667 53.0667H72.8333C73.7667 53.0667 74.4333 53.8667 74.4333 54.6667V69.6H71.1V69.3334C71.1 66.9333 69.1 65.0667 66.8334 65.0667H60.1667C57.7667 65.0667 55.9 67.0667 55.9 69.3334V69.6H52.5667V54.6667C52.5667 53.7333 53.2333 53.0667 54.1667 53.0667ZM57.9 69.6V69.3334C57.9 68 58.9667 66.9333 60.3 66.9333H66.9667C68.3 66.9333 69.3667 68 69.3667 69.3334V69.6H57.9ZM72.8333 74.9333H54.1667C53.2333 74.9333 52.5667 74.1333 52.5667 73.3333V71.7333H74.5667V73.3333C74.4333 74.2667 73.7667 74.9333 72.8333 74.9333Z"
        fill="#637381"
      />
    </svg>
  </SvgIcon>
)

export default AvatarUploadFallbackIcon
