import { createPortal } from 'react-dom'

export default function SlidePanel({ onClose, maxWidth = '420px', header, children }) {
  return createPortal(
    <>
      <div className="fixed inset-0 bg-black/40 backdrop-blur-sm animate-backdrop-in z-[9998]" onClick={onClose} />
      <div
        className="fixed top-0 right-0 h-full w-full bg-white shadow-2xl z-[9998] flex flex-col animate-slide-in-right overflow-hidden"
        style={{ maxWidth }}
      >
        {header}
        <div className="flex-1 overflow-y-auto">
          {children}
        </div>
      </div>
    </>,
    document.body
  )
}