import React from "react";

import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import {
  Modal,
  ModalClose,
  ModalHeader,
  ModalTitle,
} from "@/components/ui/modal/modal";
import { useLocale } from "@/hooks/useLocale";

import GlobalizationForm from "./globalization-form";

type GlobalizationFormModalProps = {
  closeModal: () => void;
  modalOpen: boolean;
};

const GlobalizationFormModal = ({
  closeModal,
  modalOpen,
}: GlobalizationFormModalProps) => {
  const { t } = useLocale();

  return (
    <Modal size="lg" open={modalOpen} closable={false} footer>
      <ModalHeader className="flex flex-row items-center justify-end">
        <ModalTitle className="grow">
          {t("Choose region, language and currency")}
        </ModalTitle>
        <ModalClose
          onClick={closeModal}
          className="h-fit rounded-sm opacity-70 ring-1 ring-gray-100 ring-offset-4 ring-offset-white transition-opacity data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:pointer-events-none dark:ring-offset-gray-500 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400 dark:focus:ring-gray-300"
        >
          <LIcon size={24} name="X" />
        </ModalClose>
      </ModalHeader>
      <GlobalizationForm
        onSubmit={() => {
          closeModal();
          window.location.reload();
        }}
      />
    </Modal>
  );
};

export default GlobalizationFormModal;