import React from "react";

type MobileControlsDockProps = {
  children: React.ReactNode;
  /** When false, renders nothing. */
  visible?: boolean;
  /** Optional override for the outer z-index. */
  zIndexClassName?: string;
};

/**
 * Fixed bottom dock for mobile game controls.
 * - Always visible on screen
 * - Respects iOS safe-area
 * - Keeps design tokens (no raw colors)
 */
export function MobileControlsDock({
  children,
  visible = true,
  zIndexClassName = "z-[70]",
}: MobileControlsDockProps) {
  if (!visible) return null;

  return (
    <div
      className={`fixed inset-x-0 bottom-0 ${zIndexClassName} pointer-events-none pb-[env(safe-area-inset-bottom)] px-3`}
    >
      <div className="mx-auto w-full max-w-[520px] pointer-events-auto">
        <div className="border border-primary/30 bg-background/85 backdrop-blur-md box-glow-strong rounded-lg p-3">
          {children}
        </div>
      </div>
    </div>
  );
}

/** Spacer to prevent fixed dock from covering page content in scroll containers. */
export function MobileControlsSpacer({ heightClassName = "h-40" }: { heightClassName?: string }) {
  return <div className={`md:hidden ${heightClassName}`} aria-hidden="true" />;
}
