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

export const PaginationAnatomy = 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}
    >
      <path
        d="M107 138.092L104.118 135.5L88 150L104.118 164.5L107 161.908L93.7635 150L107 138.092Z"
        fill={palette[2]}
      />
      <rect
        x={131}
        y={120}
        width={56.6735}
        height={60}
        rx={5.79592}
        fill={palette[3]}
      />
      <path
        d="M162.186 139.636V160H159.104V142.719H158.984L154.112 145.901V142.957L159.193 139.636H162.186Z"
        fill={palette[0]}
      />
      <rect
        x={211.673}
        y={120}
        width={56.6735}
        height={60}
        rx={5.79592}
        fill={palette[3]}
      />
      <path
        d="M233.105 160V157.773L239.996 150.634C240.732 149.858 241.338 149.179 241.816 148.595C242.299 148.005 242.661 147.445 242.899 146.915C243.138 146.384 243.257 145.821 243.257 145.224C243.257 144.548 243.098 143.965 242.78 143.474C242.462 142.977 242.028 142.596 241.478 142.331C240.927 142.059 240.308 141.923 239.618 141.923C238.889 141.923 238.253 142.072 237.709 142.371C237.165 142.669 236.748 143.09 236.456 143.634C236.165 144.177 236.019 144.813 236.019 145.543H233.085C233.085 144.303 233.371 143.219 233.941 142.291C234.511 141.363 235.293 140.644 236.287 140.134C237.281 139.616 238.412 139.358 239.678 139.358C240.957 139.358 242.084 139.613 243.058 140.124C244.04 140.627 244.805 141.317 245.355 142.192C245.906 143.06 246.181 144.041 246.181 145.135C246.181 145.891 246.038 146.63 245.753 147.352C245.475 148.075 244.987 148.88 244.291 149.768C243.595 150.65 242.628 151.721 241.388 152.98L237.341 157.216V157.365H246.509V160H233.105Z"
        fill={palette[0]}
      />
      <path
        d="M292.347 161.908L295.229 164.5L311.347 150L295.229 135.5L292.347 138.092L305.583 150L292.347 161.908Z"
        fill={palette[2]}
      />
    </svg>
  )
})
