// /var/www/makearmy.io/app/components/toolkit/ToolShell.tsx
"use client";

import Link from "next/link";

export default function ToolShell({
  title,
  subtitle,
  children,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
}) {
  return (
    <div className="mx-auto max-w-4xl px-4 py-8 space-y-6">
      <header className="flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold">{title}</h1>
          {subtitle && (
            <p className="text-sm text-muted-foreground mt-1">{subtitle}</p>
          )}
        </div>
        <Link
          href="https://makearmy.io"
          className="rounded-lg px-3 py-2 border hover:bg-muted transition-colors text-sm"
        >
          Back to Main Menu
        </Link>
      </header>
      {children}
    </div>
  );
}