import { useContext, createElement } from "react";
import type { ReactElement } from "react";
import type { IComponent } from "../../../types";
import type { TGridContext, IGrid } from "../config/types";
import { GridContext } from "../context";

/**
 * Элемент сетки
 * @returns {ReactElement}
 */
const GridItem: IComponent<IGrid & { utilClasses?: string[]; }> = (props): ReactElement => {

  const {
    children,
    extraClasses = {},
    extraAttrs = {},
    style = {},
    align,
    justify,
    utilClasses = [],
  } = (props || {});

  const { tag, getCN } = useContext(GridContext) as TGridContext;

  const tagName = (tag === "ul" || tag === "ol") ? "li" : "div";

  const styles = {
    "--gridItemAlignSelf": align,
    "--gridItemJustifySelf": justify,
    ...style,
  };

  return createElement(tagName, {
    style: styles,
    ...extraAttrs,
    className: getCN("item", extraClasses, utilClasses),
  }, children);
};

export {
  GridItem,
};