import type { FC, PropsWithChildren, ReactElement } from "react";
import { useContext } from "react";
import { Btn } from "../../btn";
import { Locale } from "../../locale";
import type { TModalContext } from "../config/types";
import { ModalContext } from "../context";

/**
 * Слот управления окном
 * @returns {ReactElement}
 */
export const ModalCtrl: FC<PropsWithChildren> = ({ children }): ReactElement => {

  const { getCN, id } = useContext<TModalContext>(ModalContext);

  const handlerCfg = {
    "data-js-modal-handler": JSON.stringify({
      action: "close",
      id,
    }),
    tabIndex: 1,
  };

  return (
    <aside className={getCN("ctrl")}>
      {children || (
        <ul className={getCN("list")}>
          <li>
            <Locale code={"modals.closeBtn"} attr={"title"}>
              <Btn icon={"close"} iconSize={"small"} label={null} extraAttrs={handlerCfg} />
            </Locale>
          </li>
        </ul>
      )}
    </aside>
  );

};