'use client';
import clsx from 'clsx';
import { useEffect, useState } from 'react';
import { MdClose } from 'react-icons/md';
const transitionClasses = 'transition ease-in-out duration-500';
/**
 * SlideOver component for rendering a slide-over panel from the left or right side of the screen.
 *
 * @component
 * @example
 * // Example usage of SlideOver component
 * <SlideOver
 *   side="left"
 *   closeCallback={() => console.log('SlideOver closed')}
 * >
 *   <p>SlideOver content goes here.</p>
 * </SlideOver>
 *
 * @param {Object} props - The properties of the SlideOver component.
 * @param {'left' | 'right'} props.side - The side from which the SlideOver panel should appear.
 * @param {Function} [props.closeCallback] - Optional callback function triggered when the SlideOver is closed.
 * @param {ReactNode} [props.children] - The content to be displayed inside the SlideOver.
 *
 * @returns {ReactNode} The rendered SlideOver component.
 */
export function SlideOver({ side, closeCallback, children, }) {
    const [isOpen, setIsOpen] = useState(false);
    const overlayClasses = clsx('bg-gray-1/25 pointer-events-none fixed inset-0', transitionClasses, isOpen ? 'opacity-100' : 'opacity-0');
    const containerClasses = clsx('pointer-events-none fixed inset-y-0 flex max-w-full', side === 'left' ? 'left-0 pr-10' : 'right-0 pl-10');
    const panelClasses = clsx('pointer-events-auto relative w-screen max-w-md transform', transitionClasses, isOpen
        ? side === 'left'
            ? 'translate-x-0'
            : 'translate-x-0'
        : side === 'left'
            ? '-translate-x-full'
            : 'translate-x-full');
    const closeButtonClasses = clsx('absolute top-0 flex pt-4', transitionClasses, isOpen ? 'opacity-100' : 'opacity-0', side === 'left'
        ? 'right-0 -mr-8 pl-2 sm:-mr-10 sm:pl-4'
        : 'left-0 -ml-8 pr-2 sm:-ml-10 sm:pr-4');
    const handlerClose = () => {
        setIsOpen(false);
        closeCallback && setTimeout(closeCallback, 500);
    };
    const handlerOverlayClick = (event) => {
        const target = event.target;
        const currentTarget = event.currentTarget;
        if (target.closest('.slide-over__close')) {
            handlerClose();
            return;
        }
        if (target === currentTarget) {
            handlerClose();
            return;
        }
    };
    useEffect(() => {
        setIsOpen(true);
    }, []);
    return (<>
      <div className={`relative z-50 ${isOpen ? 'modal-open' : 'modal-close'}`}>
        <div className={overlayClasses}/>

        <div className="fixed inset-0 overflow-hidden">
          <div className="absolute inset-0 overflow-hidden" onClick={handlerOverlayClick}>
            <div className={containerClasses}>
              <div className={panelClasses}>
                <div className={closeButtonClasses}>
                  <button type="button" className="slide-over__close hover:text-gray-1 dark:hover:text-gray-3 relative rounded-md text-black transition-colors dark:text-white">
                    <span className="absolute -inset-2.5"/>
                    <span className="sr-only">Close panel</span>
                    <MdClose className="h-6 w-6"/>
                  </button>
                </div>

                <div className="slide-over__content flex h-full flex-col overflow-y-auto bg-white shadow-xl dark:bg-black">
                  {children}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>);
}
//# sourceMappingURL=SlideOver.jsx.map