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

import styles from "./responsive-mobile-shell.module.css";

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={styles.shell} style={style}>
      <div className={[styles.content, className].filter(Boolean).join(" ")}>
        {children}
      </div>
    </div>
  );
}