import { Dialog, Transition } from "@headlessui/react";
import { Fragment } from "react";

export default function ProfileImageConfirmModal({
  modalOpen,
  modalImage,
  onConfirm,
  onCancel,
}) {
  return (
    <Transition appear show={modalOpen} as={Fragment}>
      <Dialog as='div' className='relative z-10' onClose={onCancel}>
        <Transition.Child
          as={Fragment}
          enter='ease-out duration-300'
          enterFrom='opacity-0'
          enterTo='opacity-100'
          leave='ease-in duration-200'
          leaveFrom='opacity-100'
          leaveTo='opacity-0'
        >
          <div className='fixed inset-0 bg-black bg-opacity-25' />
        </Transition.Child>
        <div className='fixed inset-0 overflow-y-auto'>
          <div className='flex min-h-full items-center justify-center p-4 text-center'>
            <Transition.Child
              as={Fragment}
              enter='ease-out duration-300'
              enterFrom='opacity-0 scale-95'
              enterTo='opacity-100 scale-100'
              leave='ease-in duration-200'
              leaveFrom='opacity-100 scale-100'
              leaveTo='opacity-0 scale-95'
            >
              <Dialog.Panel className='w-full max-w-sm transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
                <img
                  src={modalImage || "/default.png"}
                  alt='Profile Preview'
                  className='mb-4 h-64 w-full rounded object-cover'
                />
                <div className='flex justify-center gap-4'>
                  <button
                    className='login-btn-gradient rounded px-4 py-2 text-white'
                    onClick={onConfirm}
                  >
                    Confirm
                  </button>
                  <button
                    className='rounded bg-gray-300 px-4 py-2 text-black'
                    onClick={onCancel}
                  >
                    Cancel
                  </button>
                </div>
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition>
  );
}