import "./modal.css";

export enum ModalType {
  Error = "error",
}

type Props = {
  children: React.ReactNode;
  type?: ModalType;
  noCloseButton?: boolean;
  modalClassName?: string;
  onClose: () => void;
};

export default function Modal(props: Props) {
  const className = ["modal"];

  if (props.modalClassName?.length) {
    className.push(props.modalClassName);
  }

  if (props.type === ModalType.Error) {
    className.push("modal_type_error");
  }

  return (
    <div className={className.join(" ")}>
      {!props.noCloseButton && (
        <div className="modal__close-button" onClick={props.onClose}>
          <svg
            width="14"
            height="14"
            viewBox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M12.7071 12.7071C12.3166 13.0976 11.6834 13.0976 11.2929 12.7071L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289L11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289C13.0976 1.68342 13.0976 2.31658 12.7071 2.70711L8.41421 7L12.7071 11.2929C13.0976 11.6834 13.0976 12.3166 12.7071 12.7071Z"
              fill="#858DA5"
              stroke="#858DA5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M1.29289 12.7071C1.68342 13.0976 2.31658 13.0976 2.70711 12.7071L7.70711 7.70711C8.09763 7.31658 8.09763 6.68342 7.70711 6.29289L2.70711 1.29289C2.31658 0.902369 1.68342 0.902369 1.29289 1.29289C0.902369 1.68342 0.902369 2.31658 1.29289 2.70711L5.58579 7L1.29289 11.2929C0.902369 11.6834 0.902369 12.3166 1.29289 12.7071Z"
              fill="#858DA5"
              stroke="#858DA5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </div>
      )}

      {props.children}
    </div>
  );
}