"use client";

import { FiCheck } from "react-icons/fi";
import Button from "../../ui/Button";
import { useModal } from "../../../lib/modal-system/ModalContext";

export default function EmailUpdated({ email }: { email: string }) {
  const { closeModal } = useModal();
  return (
    <div className="text-center">
      {/* Success Icon */}
      <div className="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-[#F3EDFF]">
        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-[#8B5CF6] text-white">
          <FiCheck size={34} strokeWidth={2} />
        </div>
      </div>

      {/* Heading */}
      <h2 className="mt-8 font-heading text-3xl font-semibold text-heading">
        Your email has been updated!
      </h2>

      {/* Description */}
      <p className="mx-auto mt-5 max-w-[280px] font-body text-base leading-7 text-text">
        Your account email is now
        <br />
        <span className="font-medium text-link-1">jenny1234@gmail.com</span>
      </p>

      {/* Okay Button */}
      <Button
        variant="white"
        className="mt-8"
        BtnInnerclassName="!px-8 !py-3 !text-link-1"
        onClick={closeModal}
      >
        Okay
      </Button>
    </div>
  );
}