import { X } from 'lucide-react';
import usePwaSheetSwipe from './usePwaSheetSwipe';

export default function PwaBottomSheet({ open, title, children, footer, onClose }) {
  const { offsetY, isDragging, isClosing, swipeHandlers } = usePwaSheetSwipe(onClose);

  if (!open) return null;

  return (
    <>
      <button type="button" className="pwa-sheet-backdrop" onClick={onClose} aria-label="بستن" />
      <section
        className={`pwa-bottom-sheet ${isDragging ? 'dragging' : ''} ${isClosing ? 'closing' : ''}`}
        role="dialog"
        aria-modal="true"
        aria-label={title}
        dir="rtl"
        style={{ '--sheet-offset-y': `${offsetY}px` }}
        {...swipeHandlers}
      >
        <div className="pwa-sheet-handle" />
        <header className="pwa-bottom-sheet-head">
          <h2>{title}</h2>
          <button type="button" onClick={onClose} aria-label="بستن">
            <X size={20} />
          </button>
        </header>
        <div className="pwa-bottom-sheet-content">{children}</div>
        {footer && <footer className="pwa-bottom-sheet-footer">{footer}</footer>}
      </section>
    </>
  );
}
