import { Block, BlockProps } from "@mezo-org/mezo-clay"
import React, { SVGProps } from "react"

function DefaultAvatar(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 214 214" fill="none" {...props}>
      <rect y="-0.478027" width="166.379" height="81.7091" fill="#FF004D" />
      <rect x="166" y="-0.478027" width="48" height="82" fill="black" />
      <rect
        x="166.379"
        y="81.231"
        width="24.1044"
        height="132.291"
        fill="#DFFF80"
      />
      <rect
        x="118.758"
        y="81.231"
        width="24.1044"
        height="132.291"
        fill="#FF5500"
      />
      <rect
        x="71.1372"
        y="81.231"
        width="24.1044"
        height="132.291"
        fill="#5A59A7"
      />
      <rect
        x="23.5166"
        y="81.231"
        width="24.1044"
        height="132.291"
        fill="#47B5FF"
      />
      <rect y="81.231" width="23.5165" height="132.291" fill="#A3C238" />
      <rect
        x="190.483"
        y="81.231"
        width="23.5165"
        height="132.291"
        fill="#6E6E70"
      />
      <rect
        x="142.863"
        y="81.231"
        width="23.5165"
        height="132.291"
        fill="#0A3C01"
      />
      <rect
        x="95.2417"
        y="81.231"
        width="23.5165"
        height="132.291"
        fill="#F2A91F"
      />
      <rect
        x="47.6211"
        y="81.231"
        width="23.5165"
        height="132.291"
        fill="#6B3D01"
      />
    </svg>
  )
}

function DefaultAvatarComponent(props: BlockProps) {
  return <Block as={DefaultAvatar} {...props} />
}

export default DefaultAvatarComponent