"use client";

import { FaCheck, FaChevronLeft, FaMobile, FaUser } from "react-icons/fa6";
import { FaBirthdayCake } from "react-icons/fa";
import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
} from "@nextui-org/react";

import Button from "@/components/common/button";

type ConfirmModalProps = {
  isOpen: boolean;
  onClose: () => void;
  firstName: string;
  lastName: string;
  dateOfBirth: string;
  formattedPhoneNumber: string;
  onClickBack: () => void;
  onClickConfirm: () => void;
};

function ConfirmModal({
  isOpen,
  onClose,
  firstName,
  lastName,
  dateOfBirth,
  formattedPhoneNumber,
  onClickBack,
  onClickConfirm,
}: ConfirmModalProps) {
  return (
    <Modal
      backdrop="blur"
      className="p-4"
      classNames={{
        base: "light",
      }}
      isDismissable={false}
      isOpen={isOpen}
      size="lg"
      onClose={onClose}
    >
      <ModalContent className="text-black space-y-3">
        <ModalHeader className="flex flex-col gap-1">
          <h3 className="inline-flex font-inter items-center font-black text-xl tracking-tight">
            Confirm your information
          </h3>
        </ModalHeader>
        <ModalBody className="font-noto">
          <p className="text-sm">
            {`${firstName}, please confirm if the information you provided below is correct. Keep in mind that some fields, like your name or date of birth, cannot be changed later. If you need to make any changes, please go back and edit the information.`}
          </p>
          <div className="flex flex-col items-center justify-center mt-4">
            <div className="flex items-center">
              <FaUser className="mr-2" />
              <p className="text-sm">{`${firstName} ${lastName}`}</p>
            </div>
            <div className="flex items-center mt-2">
              <FaBirthdayCake className="mr-2" />
              <p className="text-sm">{`${dateOfBirth}`}</p>
            </div>
          </div>
          <p className="text-sm mt-4">
            This phone number will be used to verify your identity in the next
            step:
          </p>
          <div className="flex flex-row items-center justify-center mt-2">
            <FaMobile className="mr-2" />
            <span className="text-sm">{formattedPhoneNumber}</span>
          </div>
        </ModalBody>
        <ModalFooter className="flex flex-col xl:flex-row xl:justify-between">
          <Button
            btnLabel="Go back and edit"
            customVariant="transparent-black"
            size="sm"
            startContent={<FaChevronLeft />}
            onClick={onClickBack}
          />
          <Button
            btnLabel="Yes, it's correct"
            customVariant="black"
            endContent={<FaCheck />}
            size="sm"
            onClick={onClickConfirm}
          />
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

export default ConfirmModal;