/**
 * Modal Component
 *
 * Reusable modal layout component with consistent styling and behavior.
 *
 * Features:
 * - Backdrop overlay with click-to-close
 * - Header with icon, title, subtitle, and close button
 * - Scrollable content area
 * - Sticky footer with action buttons
 * - Configurable max width
 * - Fade-in and scale-in animations
 *
 * @component
 * @layer Presentation
 */

import { X } from 'lucide-react';

export interface ModalProps {
  /** Modal title */
  title: string;
  /** Optional subtitle */
  subtitle?: string;
  /** Optional icon component */
  icon?: React.ReactNode;
  /** Modal content */
  children: React.ReactNode;
  /** Footer content (buttons) */
  footer?: React.ReactNode;
  /** Close handler */
  onClose: () => void;
  /** Max width class (default: max-w-2xl) */
  maxWidth?: string;
  /** Whether to show close button (default: true) */
  showCloseButton?: boolean;
}

/**
 * Modal Component
 */
export function Modal({
  title,
  subtitle,
  icon,
  children,
  footer,
  onClose,
  maxWidth = 'max-w-2xl',
  showCloseButton = true,
}: ModalProps) {
  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 animate-fade-in p-4"
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          onClose();
        }
      }}
    >
      <div className={`bg-white rounded-lg shadow-xl w-full ${maxWidth} animate-scale-in max-h-[90vh] flex flex-col`}>
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0 bg-white rounded-t-lg">
          <div className="flex items-center gap-3">
            {icon && (
              <div className="w-10 h-10 rounded-lg flex items-center justify-center">
                {icon}
              </div>
            )}
            <div>
              <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
              {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
            </div>
          </div>
          {showCloseButton && (
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 transition-colors p-2 rounded-lg hover:bg-gray-100"
            >
              <X size={20} />
            </button>
          )}
        </div>

        {/* Content */}
        <div className="p-6 flex-1 overflow-y-auto">{children}</div>

        {/* Footer */}
        {footer && (
          <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50 flex-shrink-0 rounded-b-lg">
            {footer}
          </div>
        )}
      </div>
    </div>
  );
}