// frontend/src/components/layout/MobileDrawer.jsx
// Full-height slide-over navigation drawer for mobile viewports (< 768px).
// Renders the Sidebar inside an overlay panel.
//
// Props:
//   open    — boolean — controls visibility
//   onClose — fn      — called on backdrop click, close button, or Escape

import { useEffect } from 'react'
import Sidebar from './Sidebar'

function CloseIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
      stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"
      aria-hidden="true" focusable="false"
    >
      <path d="M3 3l10 10M13 3L3 13" />
    </svg>
  )
}

export default function MobileDrawer({ open, onClose }) {
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : ''
    return () => { document.body.style.overflow = '' }
  }, [open])

  useEffect(() => {
    if (!open) return
    const handler = (e) => { if (e.key === 'Escape') onClose() }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [open, onClose])

  if (!open) return null

  return (
    <>
      {/* Scrim */}
      <div
        role="presentation"
        onClick={onClose}
        className="drawer-scrim"
      />

      {/* Drawer panel */}
      <div
        role="dialog"
        aria-modal="true"
        aria-label="Navigation menu"
        className="drawer-panel"
      >
        <div className="drawer-titlebar">
          <span className="drawer-label">Navigation</span>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close navigation menu"
            className="drawer-close"
          >
            <CloseIcon />
          </button>
        </div>

        <div className="drawer-body">
          <Sidebar />
        </div>
      </div>
    </>
  )
}
