Mav-Mobile-UI/src/components/SettingForms/System/resetUserSettings/ResetUserSettingsModal.tsx

import { useSoundContext } from "../../../../context/SoundContext";
import ModalComponent from "../../../UI/ModalComponent";

type ResetUserSettingsModalProps = {
  isUserSettingsModalOpen: boolean;
  setIsUserSettingsModalOpen: (isOpen: boolean) => void;
};

const ResetUserSettingsModal = ({
  isUserSettingsModalOpen,
  setIsUserSettingsModalOpen,
}: ResetUserSettingsModalProps) => {
  const { dispatch } = useSoundContext();
  const handleClose = () => {
    setIsUserSettingsModalOpen(false);
  };

  const handleResetAll = () => {
    // Logic to reset all user settings goes here
    dispatch({ type: "RESET" });
    handleClose();
  };
  return (
    <ModalComponent isModalOpen={isUserSettingsModalOpen} close={handleClose}>
      <div className="p-4">
        <h2 className="text-xl font-bold mb-4">Reset All User Settings</h2>
        <p className="mb-4">Are you sure you want to reset all user settings to their default values?</p>
        <p> This action cannot be undone.</p>
        <div className="my-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
          <p className="max-w-md text-slate-300">
            This will <span className="font-bold">RESET ALL</span> user settings including{" "}
            <span className="text-blue-400">Uploaded user sounds</span> ,
            <span className="text-emerald-400"> Hotlist Sound hits</span> and{" "}
            <span className="text-amber-600">NPED Sound hits</span>. It will also reset any customized settings within
            the app to their original defaults and Clear out the session data and{" "}
            <span className="text-rose-400">alert history sightings.</span>
          </p>
        </div>
        <div className="flex justify-end gap-4">
          <button
            onClick={handleResetAll}
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 hover:cursor-pointer"
          >
            Reset
          </button>
          <button
            onClick={handleClose}
            className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 hover:cursor-pointer  "
          >
            Cancel
          </button>
        </div>
      </div>
    </ModalComponent>
  );
};

export default ResetUserSettingsModal;