"use client";

import type { ReactNode } from "react";
import { useRouter } from "next/navigation";

export function ArcadeGameShell({
  title,
  exitHref,
  elapsedSeconds,
  complete,
  worldClassName = "connections-world connections-stage",
  children,
}: {
  title: string;
  exitHref: string;
  elapsedSeconds: number;
  complete: boolean;
  worldClassName?: string;
  children: ReactNode;
}) {
  const router = useRouter();
  function exitGame() {
    if (!complete && !window.confirm("Leave this round? Your progress will not be saved.")) return;
    router.push(exitHref);
  }
  const minutes = Math.floor(elapsedSeconds / 60);
  const seconds = String(elapsedSeconds % 60).padStart(2, "0");
  return (
    <div className={`${worldClassName} mx-auto w-full max-w-6xl p-1 pb-16 sm:p-3`}>
      <header className="arcade-game-topbar connections-topbar mb-5 flex items-center justify-between gap-4 rounded-2xl border border-border-light bg-bg-surface/85 px-4 py-3 shadow-sm">
        <button onClick={exitGame} className="min-h-10 rounded-xl px-3 text-sm font-bold text-text-muted hover:bg-bg-surface-alt hover:text-text-heading">← Exit</button>
        <h1 className="truncate text-center text-lg font-extrabold text-text-heading">{title}</h1>
        <div className="min-w-16 text-right font-mono text-sm font-bold text-text-muted" aria-label={`${elapsedSeconds} seconds elapsed`}>{minutes}:{seconds}</div>
      </header>
      {children}
    </div>
  );
}