"use client";
import { Modal, Button } from "antd";
import Image from "next/image";
import { ArrowRightOutlined } from "@ant-design/icons";
import { useTranslations, useLocale } from "next-intl";

interface LogoutModalProps {
  isVisible: boolean;
  onClose: () => void;
  onConfirm?: () => void;
}

const LogoutModal: React.FC<LogoutModalProps> = ({
  isVisible,
  onClose,
  onConfirm,
}) => {
  const t = useTranslations("Logout");
  const currentLocale = useLocale();
  const isRTL = currentLocale === "ar";

  return (
   

    <Modal
      open={isVisible}
      onCancel={onClose}
      footer={null}
      centered
      className="custom-modal  !w-[90%] sm:!w-[400px]"
    >
      <div className="text-center py-[30px]">
        <Image
          src="/images/logout/Group.png"
          alt="Logout"
          width={100}
          height={100}
          className="mx-auto mb-4"
        />
        <h2 className="text-[#424242] text-[24px] sm:text-[30px] font-[800] capitalize mb-[3px]">
          {t("logout-title")}
        </h2>
        <h3 className="text-[#424242] text-[14px] sm:text-[16px]  mb-[10px]">
          {t("logout-desc")}
        </h3>
        <div className="flex justify-center gap-4 mt-4">
          <Button
            className="bg-[#03B89E] text-white !border-primary !outline-none hover:!text-primary rounded-md px-4 py-2 w-[200px] min-h-[45px] text-[19px] font-[700]"
            onClick={onConfirm}
          >
            {t("logout-btn")}{" "}
            <ArrowRightOutlined
              className={isRTL ? "rotate-180 ml-[5px]" : "ml-[5px]"}
            />
          </Button>
        </div>
      </div>
    </Modal>
   
  );
};

export default LogoutModal;