GlassModal.tsx

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import clsx from 'clsx';
import { GlassContainer } from './GlassContainer';
import { GlassIntensity } from '../types/glass';

export interface GlassModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
  size?: 'small' | 'medium' | 'large' | 'full';
  intensity?: GlassIntensity;
  closeOnOverlay?: boolean;
  className?: string;
}

export const GlassModal: React.FC<GlassModalProps> = ({
  isOpen,
  onClose,
  children,
  size = 'medium',
  intensity = 'strong',
  closeOnOverlay = true,
  className,
}) => {
  const [mounted, setMounted] = React.useState(false);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }

    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [isOpen]);

  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [isOpen, onClose]);

  if (!mounted || !isOpen) return null;

  const sizeClasses = {
    small: 'max-w-sm',
    medium: 'max-w-md',
    large: 'max-w-2xl',
    full: 'max-w-full mx-4',
  };

  const modalContent = (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-black/20 backdrop-blur-sm"
        onClick={closeOnOverlay ? onClose : undefined}
      />
      <GlassContainer
        intensity={intensity}
        blur={32}
        saturation={200}
        luminosity={110}
        cornerRadius={20}
        borderWidth={0.5}
        borderOpacity={0.25}
        shadowIntensity={0.3}
        className={clsx(
          'glass-modal',
          'relative',
          'w-full',
          sizeClasses[size],
          'max-h-[90vh]',
          'overflow-y-auto',
          className
        )}
      >
        <div className="p-6">
          {children}
        </div>
      </GlassContainer>
    </div>
  );

  return ReactDOM.createPortal(modalContent, document.body);
};