import { ReactNode, PropsWithChildren } from 'react';
import { HeadingProps } from '../Heading/Heading.types.cjs';
import '../types.cjs';
import '@emotion/react';

type ModalHeaderProps = {
    /**
     * @deprecated text를 사용해주세요 (Heading props와 동일)
     */
    title?: string;
    type?: "leftAlign" | "centerAlign";
    backButton?: boolean;
    closeButton?: boolean;
    onClickBackButton?: VoidFunction;
    onClickCloseButton?: VoidFunction;
} & Partial<Pick<HeadingProps, "text" | "subtle">>;
type ModalAddonProps = {
    left?: ReactNode;
    right?: ReactNode;
    closeButton?: never;
} | {
    left?: ReactNode;
    right?: never;
    closeButton?: ReactNode;
};
type ModalProps = PropsWithChildren & {
    isOpen: boolean;
    closeOnEsc?: boolean;
    setClose: VoidFunction;
    closeOnBackdrop?: boolean;
    /**
     * small: 348px
     *
     * medium: 540px
     *
     * large: 720px
     *
     * full: 100%
     */
    width: "small" | "medium" | "large" | "full";
    /**
     * @default false
     */
    fullHeight?: boolean;
};
type ModalContainerProps = Pick<ModalProps, "width" | "fullHeight" | "children">;

export { ModalAddonProps, ModalContainerProps, ModalHeaderProps, ModalProps };