// Slide-up sheet used for every reader tool. `modal` sheets dim the page and
// close on outside tap; non-modal ones (the verse sheet) leave the text
// tappable. With `pane`, screens >= lg show it as a right-hand side pane
// instead of a bottom sheet (tablet landscape / desktop).
import { CloseIcon } from './icons.jsx';

export default function Sheet({ open, onClose, title, headerRight, modal = true, pane = false, children }) {
  if (!open) return null;
  return (
    <>
      {modal && <div className="fixed inset-0 z-40 bg-black/30" onClick={onClose} aria-hidden="true" />}
      <div
        role="dialog"
        aria-label={typeof title === 'string' ? title : undefined}
        className={`fixed inset-x-0 bottom-0 z-50 flex max-h-[72vh] flex-col rounded-t-2xl border-t border-[var(--r-line)] bg-[var(--r-bar)] text-[var(--r-text)] font-sans ${
          pane ? 'lg:inset-x-auto lg:bottom-0 lg:right-0 lg:top-12 lg:max-h-none lg:w-[24rem] lg:rounded-none lg:border-l lg:border-t-0' : 'sm:left-1/2 sm:right-auto sm:w-[36rem] sm:-translate-x-1/2'
        }`}
      >
        <div className="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-[var(--r-line)] lg:hidden" />
        <div className="flex items-center justify-between gap-2 px-4 pb-2 pt-2">
          <div className="min-w-0 truncate text-sm font-medium">{title}</div>
          <div className="flex items-center gap-1 text-[var(--r-sub)]">
            {headerRight}
            <button type="button" onClick={onClose} aria-label="Close" className="rounded-lg p-1.5 hover:bg-black/5">
              <CloseIcon />
            </button>
          </div>
        </div>
        <div className="min-h-0 flex-1 overflow-y-auto px-4 pb-6">{children}</div>
      </div>
    </>
  );
}