import { useKomiModals } from "@komi-app/components";
import React from "react";
import { DnsRecordsStep } from "./ModalSteps/DnsRecordsStep";
import "./DnsRecordsModal.scss";

export function useDnsRecordsModal() {
  const modals = useKomiModals();

  return {
    open: () =>
      modals.open({
        title: "Your DNS Records",
        className: "email-domain-setup-dns-records-modal",
        hasCloseButton: true,
        hasHeaderDivider: true,
        maxWidth: "890px",
        children: ({ close }) => <DnsRecordsModalContent close={close} />,
      }),
  };
}

type DnsRecordsModalContentProps = {
  close: () => void;
};
export const DnsRecordsModalContent = ({
  close,
}: DnsRecordsModalContentProps) => {
  return (
    <>
      <div>
        <DnsRecordsStep
          previousLabel="Cancel"
          onPrevious={() => close()}
          nextLabel="Done"
          onNext={() => close()}
        />
      </div>
    </>
  );
};
