import React from 'react';
import { Modal } from '.';

interface ConfirmLogoutModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
}

export const ConfirmLogoutModal: React.FC<ConfirmLogoutModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
}) => {
  return (
    <Modal isOpen={isOpen} onClose={onClose} showCloseButton={false} className="max-w-[450px] m-4">
      <div className="no-scrollbar relative w-full max-w-[700px] rounded-3xl bg-white p-4 lg:p-8">
        <div className="px-2 text-center">
          <h4 className="text-xl lg:text-2xl font-semibold text-brand-950 mb-2">
            Confirm Logout
          </h4>
          <p className="mb-6 text-sm text-gray-500 lg:mb-7">
            Are you sure you want to logout?
          </p>
        </div>
        <div className="flex items-center gap-3 mt-6 justify-center">
          <button
            onClick={onClose}
            className="flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-[#f7f8fa] px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={() => {
              onConfirm();
              onClose();
            }}
            className="inline-flex items-center justify-center font-medium gap-2 rounded-lg transition px-4 py-3 text-sm bg-brand-950 text-white shadow-theme-xs hover:text-brand-950 hover:bg-yellow-500"
          >
            Logout
          </button>
        </div>
      </div>
    </Modal>
  );
};