import { IProps } from "@/common/Iprops.interface";
import blue from "@/assets/img/blue.png";
import white from "@/assets/img/white.png";
import { useCallback, useId, useMemo } from "react";

interface Ball {
  size: string;
  align?: string;
  position: string[];
  rotation?: string;
  zIndex: string;
  color: string;
}
interface BallAnimeType extends IProps {
  animation?: string;
  config: Ball[];
}
interface BallElement extends IProps {
  config: Ball;
}
//   ${rotation?`rotate-[${rotation}deg]`:''}
const BallHolder = (props: BallElement) => {
  const { zIndex, color, size, position,rotation } = props.config;
  const align = props.config.align ? props.config.align : "left";
  const getPosition = useMemo(() => {
    if (align === "left") {
      return {
        width: size,
        top: position[1],
        left: position[0],
        right: "",
        zIndex: zIndex,
        transform:rotation&&`rotate(${rotation}deg)`
      };
    } else {
      return {
        width: size,
        top: position[1],
        right: position[0],
        left: "",
        zIndex: zIndex,
        transform:rotation&&`rotate(${rotation}deg)`
      };
    }
  }, [align, position]);
  return (
    <div className="">
      <img
        src={color === "blue" ? blue : white}
        className={`img-holder
            object-cover
            absolute
            `}
        style={getPosition}
      />
    </div>
  );
};

export const BallAnime = (props: BallAnimeType) => {
  const { children } = props;
  const animation = props.animation ? props.animation : "move-in";

  return (
    <div className="w-full h-full min-w-[1440px]  relative">
      {props.config && props.config.length > 0
        ? props.config.map((i,index) => {
            return <BallHolder key={index} config={i}></BallHolder>;
          })
        : ""}
      <div className="content-holder w-full h-full">{children}</div>
    </div>
  );
};
