import { createComponent } from "./create-component"

export const AvatarAnatomy = createComponent((props) => {
  const { palette, ...rest } = props
  return (
    <svg
      width={400}
      height={300}
      viewBox="0 0 400 300"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...rest}
    >
      <rect
        x={209}
        y={123}
        width={55}
        height={55}
        rx={27.5}
        fill={palette[5]}
      />
      <path
        d="M253.258 166.888C249.001 171.091 243.096 173.703 236.57 173.703C229.971 173.703 224.009 171.025 219.742 166.738V163.906C219.742 160.301 222.742 157.375 226.445 157.375H246.555C250.258 157.375 253.258 160.301 253.258 163.906V166.888Z"
        fill={palette[15]}
      />
      <path
        d="M236.498 133.312C231.04 133.312 226.617 137.736 226.617 143.194C226.617 148.655 231.04 153.078 236.498 153.078C241.956 153.078 246.383 148.655 246.383 143.194C246.383 137.736 241.956 133.312 236.498 133.312Z"
        fill={palette[15]}
      />
      <rect
        x={136}
        y={123}
        width={55}
        height={55}
        rx={27.5}
        fill={palette[3]}
      />
      <path
        d="M151.849 158V142.727H153.699V156.359H160.798V158H151.849ZM175.773 142.727V158H173.983L165.661 146.009H165.511V158H163.662V142.727H165.452L173.804 154.749H173.953V142.727H175.773Z"
        fill={palette[15]}
      />
    </svg>
  )
})
