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

export interface ResponsiveMobileShellProps {
  children: ReactNode;
  /** Background used inside the mobile canvas. */
  background?: string;
  /** Background used outside the mobile canvas on wider screens. */
  outerBackground?: string;
  /** Class applied to the mobile canvas. */
  className?: string;
}

export function ResponsiveMobileShell({
  children,
  background,
  outerBackground,
  className,
}: ResponsiveMobileShellProps) {
  const style = {
    "--mobile-shell-background": background,
    "--mobile-shell-outer-background": outerBackground,
  } as CSSProperties;

  return (
    <div
      className="flex min-h-(--app-viewport-height,100dvh) w-full min-w-0 flex-[1_1_auto] justify-center overflow-x-hidden bg-(--mobile-shell-outer-background,#000000)"
      style={style}
    >
      <div
        className={[
          "relative flex min-h-(--app-viewport-height,100dvh) w-full min-w-0 max-w-(--app-max-width,540px) flex-[1_1_auto] flex-col overflow-x-hidden overflow-x-clip bg-(--mobile-shell-background,transparent)",
          className,
        ]
          .filter(Boolean)
          .join(" ")}
      >
        {children}
      </div>
    </div>
  );
}
