"use client";

import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
} from "@nextui-org/react";
import { FaChevronRight } from "react-icons/fa";

import Button from "@/components/common/button";
import { getCountryNameFromCallingCode } from "@/constants/countries";

type ConfirmModalProps = {
  firstName: string;
  isOpen: boolean;
  userCountryCode: number;
  onClose: () => void;
  onClickJoin: () => void;
};

function BlockedSignupModal({
  firstName,
  isOpen,
  userCountryCode,
  onClose,
  onClickJoin,
}: ConfirmModalProps) {
  const userCountry = getCountryNameFromCallingCode(`+${userCountryCode}`);

  return (
    <Modal
      hideCloseButton
      backdrop="blur"
      className="p-4"
      classNames={{
        base: "light",
      }}
      isDismissable={false}
      isOpen={isOpen}
      size="lg"
      onClose={onClose}
    >
      <ModalContent className="text-black">
        <ModalHeader className="flex flex-col gap-1">
          <h3 className="inline-flex font-inter items-center font-black text-xl tracking-tight">
            Registration unavailable
          </h3>
        </ModalHeader>
        <ModalBody className="text-sm">
          <p className="pt-2">
            {firstName}, unfortunately we cannot process new account
            registrations from your country
            {userCountry ? ` (${userCountry})` : ""} at this time.
          </p>
          <p>
            Although our database is open to people from around the world, at
            the moment, the third-party platform that helps us verify phone
            numbers is unable to process sign-ups from specific countries. In
            other words, our phone verification system has limitations in
            certain regions, preventing us from accepting sign-ups from those
            locations. This is a technical constraint that we hope will improve
            overtime.
          </p>
          <p>
            You can still join our community by signing up to our international
            panel, by clicking the button below.
          </p>
        </ModalBody>
        <ModalFooter className="flex flex-col xl:flex-row xl:justify-between">
          <Button
            fullWidth
            btnLabel="Join our international community"
            customVariant="black"
            endContent={<FaChevronRight />}
            size="sm"
            onClick={onClickJoin}
          />
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

export default BlockedSignupModal;