import React from "react";
import {
  Modal as ModalStyle,
  ModalContainer,
  ModalTitle,
  Overlay,
  CloseIcon,
  ButtonContainer,
  ModalBodyContainer,
  ModalUpperContainer,
} from "./ModalStyles";
import { Button, ButtonProps } from "../Button";
export interface ModalProps {
  size?: "s" | "m" | "l";
  modalTitle?: string;
  modalBody?: React.ReactNode;
  showModal?: boolean;
  onCloseModal?: () => void;
  noClose?: boolean;
  modalType?: "browse" | "photo upload";
  topPosition?: number;
  primaryButtonProps?: ButtonProps;
  secondaryButtonProps?: ButtonProps;
}

const close = new URL("./assets/close.svg", import.meta.url).href;

export const Modal: React.FC<ModalProps> = (props) => {
  const {
    size,
    modalTitle,
    modalBody,
    showModal,
    onCloseModal,
    noClose,
    modalType,
    topPosition,
    primaryButtonProps,
    secondaryButtonProps,
  } = props;
  return (
    <ModalContainer showModal={showModal}>
      <Overlay />
      <ModalStyle size={size} modalType={modalType} topPosition={topPosition}>
        <ModalUpperContainer>
          <ModalTitle>
            <div>{modalTitle}</div>
            <CloseIcon src={close} onClick={onCloseModal} noClose={noClose} />
          </ModalTitle>
          <ModalBodyContainer>{modalBody}</ModalBodyContainer>
        </ModalUpperContainer>
        <ButtonContainer>
          {primaryButtonProps ? <Button buttonType="primary" {...primaryButtonProps} /> : null}
          {secondaryButtonProps ? <Button buttonType="secondary" {...secondaryButtonProps} />: null}
        </ButtonContainer>
      </ModalStyle>
    </ModalContainer>
  );
};
