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

export const KbdAnatomy = 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}
    >
      <mask id="path-1-inside-1_1882_341" fill={palette[0]}>
        <path d="M115 135C115 131.134 118.134 128 122 128H202C205.866 128 209 131.134 209 135V165C209 168.866 205.866 172 202 172H122C118.134 172 115 168.866 115 165V135Z" />
      </mask>
      <path
        d="M115 135C115 131.134 118.134 128 122 128H202C205.866 128 209 131.134 209 135V165C209 168.866 205.866 172 202 172H122C118.134 172 115 168.866 115 165V135Z"
        fill={palette[2]}
      />
      <path
        d="M113 135C113 130.029 117.029 126 122 126H202C206.971 126 211 130.029 211 135H207C207 132.239 204.761 130 202 130H122C119.239 130 117 132.239 117 135H113ZM211 167C211 171.971 206.971 176 202 176H122C117.029 176 113 171.971 113 167L117 165C117 166.657 119.239 168 122 168H202C204.761 168 207 166.657 207 165L211 167ZM122 176C117.029 176 113 171.971 113 167V135C113 130.029 117.029 126 122 126V130C119.239 130 117 132.239 117 135V165C117 166.657 119.239 168 122 168V176ZM202 126C206.971 126 211 130.029 211 135V167C211 171.971 206.971 176 202 176V168C204.761 168 207 166.657 207 165V135C207 132.239 204.761 130 202 130V126Z"
        fill={palette[3]}
        mask="url(#path-1-inside-1_1882_341)"
      />
      <path
        d="M125.1 155.8H128.348C128.516 156.808 129.776 157.564 131.26 157.564C132.716 157.564 133.668 156.836 133.668 155.688C133.668 154.708 132.996 154.232 131.4 154.064L130.644 153.98C127.2 153.588 125.548 152.188 125.548 149.64C125.548 146.644 127.788 144.6 131.12 144.6C134.312 144.6 136.748 146.504 136.86 149.08H133.724C133.612 148.072 132.576 147.4 131.176 147.4C129.748 147.4 128.852 148.1 128.852 149.22C128.852 150.144 129.468 150.648 130.868 150.816L131.624 150.9C135.292 151.32 137.028 152.72 137.028 155.268C137.028 158.292 134.592 160.392 131.064 160.392C127.648 160.392 125.1 158.432 125.1 155.8ZM141.105 160V139.252H144.465V146.728H144.577C145.389 145.356 146.649 144.6 148.329 144.6C151.073 144.6 152.865 146.644 152.865 149.78V160H149.505V150.06C149.505 148.408 148.693 147.4 147.349 147.4C145.669 147.4 144.465 148.968 144.465 151.18V160H141.105ZM156.41 160V156.92H160.61V147.96H156.55V144.88H163.97V156.92H168.17V160H156.41ZM159.462 140.372C159.462 138.944 160.61 137.824 162.01 137.824C163.438 137.824 164.558 138.944 164.558 140.372C164.558 141.772 163.438 142.92 162.01 142.92C160.61 142.92 159.462 141.772 159.462 140.372ZM174.347 160V147.96H170.427V144.88H174.347V144.684C174.347 140.96 176.223 139 179.807 139C180.955 139 182.047 139.196 182.887 139.588V142.388C182.075 142.024 181.235 141.856 180.451 141.856C178.603 141.856 177.707 142.78 177.707 144.684V144.88H182.607V147.96H177.707V160H174.347ZM192.536 154.596C192.536 156.5 193.432 157.424 195.28 157.424C196.064 157.424 196.904 157.256 197.716 156.892V159.692C196.876 160.084 195.784 160.28 194.636 160.28C191.052 160.28 189.176 158.32 189.176 154.596V147.96H185.256V144.88H189.176V140.708L192.536 140.12V144.88H197.436V147.96H192.536V154.596Z"
        fill={palette[15]}
      />
      <path
        d="M230.836 143.176V148.934H236.508V151.203H230.836V156.918H228.337V151.203H222.723V148.934H228.337V143.176H230.836Z"
        fill="black"
      />
      <mask id="path-5-inside-2_1882_341" fill={palette[0]}>
        <path d="M251 135C251 131.134 254.134 128 258 128H277C280.866 128 284 131.134 284 135V165C284 168.866 280.866 172 277 172H258C254.134 172 251 168.866 251 165V135Z" />
      </mask>
      <path
        d="M251 135C251 131.134 254.134 128 258 128H277C280.866 128 284 131.134 284 135V165C284 168.866 280.866 172 277 172H258C254.134 172 251 168.866 251 165V135Z"
        fill={palette[2]}
      />
      <path
        d="M249 135C249 130.029 253.029 126 258 126H277C281.971 126 286 130.029 286 135H282C282 132.239 279.761 130 277 130H258C255.239 130 253 132.239 253 135H249ZM286 167C286 171.971 281.971 176 277 176H258C253.029 176 249 171.971 249 167L253 165C253 166.657 255.239 168 258 168H277C279.761 168 282 166.657 282 165L286 167ZM258 176C253.029 176 249 171.971 249 167V135C249 130.029 253.029 126 258 126V130C255.239 130 253 132.239 253 135V165C253 166.657 255.239 168 258 168V176ZM277 126C281.971 126 286 130.029 286 135V167C286 171.971 281.971 176 277 176V168C279.761 168 282 166.657 282 165V135C282 132.239 279.761 130 277 130V126Z"
        fill={palette[3]}
        mask="url(#path-5-inside-2_1882_341)"
      />
      <path
        d="M260.68 160V140.4H264.18V148.296H270.62V140.4H274.12V160H270.62V151.516H264.18V160H260.68Z"
        fill={palette[15]}
      />
    </svg>
  )
})
