import { Portal } from "solid-js/web";
import { Show, type JSX } from "solid-js";
import { X } from "lucide-solid";

interface ModalProps {
  open: boolean;
  title: string;
  onClose: () => void;
  children: JSX.Element;
}

export default function Modal(props: ModalProps) {
  return (
    <Show when={props.open}>
      <Portal>
        <div 
          class="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
          style={{
            background: 'rgba(0, 0, 0, 0.6)',
            animation: 'fadeIn 0.2s ease-out'
          }}
          onClick={props.onClose}
        >
          <div
            class="relative w-full max-w-lg rounded-2xl border border-[var(--border)] bg-[var(--surface)] shadow-2xl scale-in"
            style={{
              'box-shadow': '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05)'
            }}
            onClick={e => e.stopPropagation()}
          >
            {/* Decorative gradient top border */}
            <div class="absolute top-0 left-0 right-0 h-1 rounded-t-2xl bg-gradient-to-r from-[var(--accent)] via-[var(--secondary)] to-[var(--accent)] opacity-80" />
            
            <div class="flex items-center justify-between border-b border-[var(--border)] px-6 py-4 bg-[var(--bg-subtle)]">
              <h2 class="text-base font-semibold tracking-tight" style="font-family: var(--font-serif); font-variation-settings: 'opsz' 120;">
                {props.title}
              </h2>
              <button
                class="group flex h-9 w-9 items-center justify-center rounded-xl text-[var(--text-muted)] transition-all duration-200 hover:bg-[var(--bg-muted)] hover:text-[var(--text)] hover:scale-110 hover:rotate-90"
                onClick={props.onClose}
                aria-label="Close"
              >
                <X size={18} class="transition-transform duration-200" />
              </button>
            </div>
            <div class="max-h-[calc(100vh-200px)] overflow-y-auto scrollbar-thin p-6">
              {props.children}
            </div>
          </div>
        </div>
      </Portal>
    </Show>
  );
}

