"use client";
import Image, { ImageProps } from "next/image";
import { Children, ReactNode, cloneElement } from "react";

interface Props extends ImageProps {}

export default function ImageSync(props: Props) {
  // eslint-disable-next-line
  const clonedElement = cloneElement(<Image {...props} />);

  // @ts-ignore
  const oldRender = clonedElement.type.render;

  function newRender(props: any, forwardRef: any) {
    const result = oldRender(props, forwardRef);

    const newChildren: ReactNode[] = [];
    Children.forEach(result.props.children, (child, index) => {
      if (index === 0) {
        const newChild = cloneElement(child, {
          key: index,
          decoding: "sync",
        });
        return newChildren.push(newChild);
      }
      newChildren.push(child);
    });

    const clonedElement = cloneElement(result, { children: newChildren });

    return clonedElement;
  }

  // @ts-ignore
  clonedElement.type.render = newRender;

  return clonedElement;
}