import type { ReactElement, ReactNode } from "react";

/**
 * The narrowest viewport the Signage management UI is designed for.
 *
 * Signage's dashboard is a timeline editor, a slot table, a live preview, and a display roster shown
 * together. Compressing that into a phone would not make it usable, it would make it a different
 * product — the mobile application this release deliberately does not build. So below this width the
 * operator is told plainly where to go instead of being handed a broken layout.
 *
 * The switch is a CSS media query rather than a measured width in JavaScript: both branches are
 * always in the DOM and always in the accessibility tree, so a screen reader and a test find the
 * same content regardless of how the environment reports its viewport.
 */
export const SIGNAGE_MIN_DESKTOP_WIDTH_PX = 1024;

export function DesktopOnly({ children }: { readonly children: ReactNode }): ReactElement {
  return (
    <>
      <div className="signage-narrow-notice" data-testid="signage-narrow-notice" role="note">
        <h2 className="signage-narrow-notice__title">Signage needs a desktop screen</h2>
        <p className="signage-narrow-notice__body">
          {`Open the Ekklesia Dashboard on a display at least ${SIGNAGE_MIN_DESKTOP_WIDTH_PX} pixels wide to manage timelines, images, channels, and playback.`}
        </p>
      </div>
      <div className="signage-desktop" data-testid="signage-desktop">
        {children}
      </div>
    </>
  );
}