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

export const DrawerAnatomy = 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={233} width={167} height={300} fill={palette[3]} />
      <path
        d="M372.22 28.7188C372.079 28.8595 372 29.0503 372 29.2492C372 29.4481 372.079 29.6389 372.22 29.7795C372.36 29.9201 372.551 29.999 372.75 29.999C372.949 29.999 373.14 29.9199 373.28 29.7792L377.911 25.1493C377.922 25.1376 377.936 25.1284 377.951 25.1221C377.967 25.1158 377.983 25.1126 377.999 25.1126C378.016 25.1126 378.032 25.1158 378.047 25.1221C378.062 25.1284 378.076 25.1376 378.088 25.1493L382.718 29.7802C382.788 29.8499 382.871 29.9051 382.962 29.9428C383.052 29.9806 383.15 30 383.248 30C383.347 30 383.445 29.9806 383.536 29.943C383.627 29.9053 383.709 29.8501 383.779 29.7805C383.849 29.7108 383.904 29.6282 383.941 29.5372C383.979 29.4462 383.999 29.3487 383.999 29.2502C383.999 29.1517 383.979 29.0542 383.942 28.9632C383.904 28.8722 383.849 28.7895 383.779 28.7198L379.149 24.0879C379.138 24.0763 379.128 24.0625 379.122 24.0473C379.116 24.0321 379.112 24.0159 379.112 23.9994C379.112 23.983 379.116 23.9667 379.122 23.9515C379.128 23.9363 379.138 23.9225 379.149 23.9109L383.78 19.2805C383.921 19.1397 384 18.9488 383.999 18.7498C383.999 18.5508 383.92 18.36 383.779 18.2194C383.639 18.0788 383.448 17.9999 383.249 18C383.05 18.0001 382.859 18.0793 382.718 18.2201L378.088 22.8496C378.076 22.8612 378.062 22.8704 378.047 22.8767C378.032 22.883 378.016 22.8863 377.999 22.8863C377.983 22.8863 377.967 22.883 377.951 22.8767C377.936 22.8704 377.922 22.8612 377.911 22.8496L373.28 18.2201C373.211 18.1505 373.128 18.0952 373.037 18.0575C372.946 18.0198 372.849 18.0004 372.75 18.0004C372.551 18.0003 372.36 18.0793 372.22 18.2199C372.079 18.3605 372 18.5512 372 18.7501C372 18.9491 372.079 19.1398 372.22 19.2805L376.849 23.9109C376.861 23.9225 376.87 23.9363 376.877 23.9515C376.883 23.9667 376.886 23.983 376.886 23.9994C376.886 24.0159 376.883 24.0321 376.877 24.0473C376.87 24.0625 376.861 24.0763 376.849 24.0879L372.22 28.7188Z"
        fill={palette[15]}
      />
      <rect x={247} y={18} width={105} height={12} rx={6} fill={palette[15]} />
      <rect x={247} y={56} width={129} height={7} rx={3.5} fill={palette[5]} />
      <rect x={247} y={81} width={129} height={7} rx={3.5} fill={palette[5]} />
      <rect x={247} y={106} width={129} height={7} rx={3.5} fill={palette[5]} />
      <rect x={247} y={131} width={89} height={7} rx={3.5} fill={palette[5]} />
      <rect x={274} y={265} width={50} height={21} rx={4} fill={palette[15]} />
      <rect x={333} y={265} width={53} height={21} rx={4} fill={palette[7]} />
    </svg>
  )
})
