import { IconContainerProps, Orientation, iconSize } from "./types";

function IconContainer({
  children,
  color,
  size = "small",
  isActive,
  nestedComponent,
  style,
}: IconContainerProps) {
  const orientationStyle = {
    [Orientation.BottomLeft]: {
      bottom: `calc(-${iconSize[size]}/9)`,
      left: `calc(-${iconSize[size]}/9)`,
    },
    [Orientation.BottomRight]: {
      bottom: `calc(-${iconSize[size]}/9)`,
      right: `calc(-${iconSize[size]}/9)`,
    },
    [Orientation.TopLeft]: {
      top: `calc(-${iconSize[size]}/9)`,
      left: `calc(-${iconSize[size]}/9)`,
    },
    [Orientation.TopRight]: {
      top: `calc(-${iconSize[size]}/9)`,
      right: `calc(-${iconSize[size]}/9)`,
    },
  };
  return (
    <div
      style={{
        position: "relative",
        zIndex: 10,
        width: iconSize[size],
        height: iconSize[size],
        ...style,
      }}
    >
      {children}
      {nestedComponent?.node && (
        <div
          color={isActive ? color ?? undefined : undefined}
          style={{
            width: `calc(${iconSize[size]}/1.75)`,
            height: `calc(${iconSize[size]}/1.75)`,
            position: "absolute",
            zIndex: 20,
            background: nestedComponent?.options?.orientation ?? undefined,
            ...orientationStyle[
              nestedComponent?.options?.orientation ?? Orientation.BottomRight
            ],
          }}
        >
          {nestedComponent?.node ? nestedComponent.node : <></>}
        </div>
      )}
    </div>
  );
}

export default IconContainer;