'use client';
import React, { Fragment } from 'react';
import { Dialog, Transition, TransitionChild, DialogPanel } from '@headlessui/react';
import IconX from '@/components/icon/icon-x';

interface EditProfileModalProps {
  isOpen: boolean;
  onClose: () => void;
  params: any;
  onChange: (e: any) => void;
  onSave: () => void;
}

const EditProfileModal: React.FC<EditProfileModalProps> = ({
  isOpen,
  onClose,
  params,
  onChange,
  onSave,
}) => {
  return (
    <Transition appear show={isOpen} as={Fragment}>
      <Dialog as="div" open={isOpen} onClose={onClose} className="relative z-50">
        <TransitionChild
          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]/60" />
        </TransitionChild>

        <div className="fixed inset-0 overflow-y-auto">
          <div className="flex min-h-full items-center justify-center px-4 py-8">
            <TransitionChild
              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"
            >
              <DialogPanel className="panel w-full max-w-lg overflow-hidden rounded-lg border-0 p-0 text-black dark:text-white-dark">
                {/* Close Button */}
                <button
                  type="button"
                  onClick={onClose}
                  className="absolute top-4 text-gray-400 hover:text-gray-800 ltr:right-4 rtl:left-4"
                >
                  <IconX />
                </button>

                {/* Header */}
                <div className="bg-[#00d1ff] py-3 text-lg font-medium ltr:pl-5 rtl:pr-5 dark:bg-[#121c2c]">
                  Update Profile
                </div>

                {/* Form */}
                <div className="p-5">
                  <form noValidate>
                    <div className="mb-4">
                      <label>Name</label>
                      <input
                        id="name"
                        type="text"
                        className="form-input"
                        value={params.name}
                        onChange={onChange}
                        placeholder="Enter full name"
                      />
                    </div>

                    <div className="mb-4">
                      <label>Email</label>
                      <input
                        id="email"
                        type="email"
                        className="form-input"
                        value={params.email}
                        onChange={onChange}
                        placeholder="Enter email"
                      />
                    </div>

                    <div className="mb-4">
                      <label>Phone Number</label>
                      <input
                        id="phonenumber"
                        type="text"
                        className="form-input"
                        value={params.phonenumber}
                        onChange={onChange}
                        placeholder="Enter phone number"
                      />
                    </div>

                    {/* <div className="mb-4">
                      <label>Company Name</label>
                      <input
                        id="companyname"
                        type="text"
                        className="form-input"
                        value={params.companyname}
                        onChange={onChange}
                        placeholder="Enter company name"
                      />
                    </div> */}

                    {/* ✅ Role Display (Read-only) */}
                    {/* <div className="mb-4">
                      <label>Role</label>
                      <input
                        id="role"
                        type="hidden"
                        className="form-input bg-gray-100 cursor-not-allowed text-gray-700"
                        value={params.role}
                        readOnly
                      />
                    </div> */}

                    <div className="mt-6 flex justify-end">
                      <button
                        type="button"
                        className="btn btn-outline-danger"
                        onClick={onClose}
                      >
                        Cancel
                      </button>
                      <button
                        type="button"
                        className="btn btn-primary ltr:ml-4 rtl:mr-4"
                        onClick={onSave}
                      >
                        Save Changes
                      </button>
                    </div>
                  </form>
                </div>
              </DialogPanel>
            </TransitionChild>
          </div>
        </div>
      </Dialog>
    </Transition>
  );
};

export default EditProfileModal;