import { useEffect } from 'react'

interface Props {
  open: boolean
  onClose: () => void
  title: string
  width?: number
  children: React.ReactNode
  footer?: React.ReactNode
}

export function SlidePanel({ open, onClose, title, width = 480, children, footer }: Props) {
  useEffect(() => {
    const h = (e: KeyboardEvent) => e.key === 'Escape' && onClose()
    document.addEventListener('keydown', h)
    return () => document.removeEventListener('keydown', h)
  }, [onClose])

  return (
    <>
      {open && <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,.3)', zIndex:200 }} />}
      <div style={{
        position: 'fixed', top: 0, right: 0, bottom: 0, width,
        background: '#fff', zIndex: 201,
        transform: open ? 'translateX(0)' : `translateX(${width}px)`,
        transition: 'transform .25s ease',
        display: 'flex', flexDirection: 'column',
        boxShadow: '-4px 0 24px rgba(0,0,0,.15)',
      }}>
        <div style={{ padding: '18px 24px 14px', borderBottom: '1px solid #e2e8f0',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>{title}</h3>
          <button onClick={onClose} style={{ background:'none', border:'none',
            fontSize:18, color:'#94a3b8', cursor:'pointer', lineHeight:1, padding:4 }}>✕</button>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: '20px 24px' }}>{children}</div>
        {footer && (
          <div style={{ padding:'14px 24px', borderTop:'1px solid #e2e8f0',
            display:'flex', justifyContent:'flex-end', gap:8, flexShrink:0 }}>
            {footer}
          </div>
        )}
      </div>
    </>
  )
}
