import Link from "next/link";
import { cn } from "@/lib/utils";

type ToolShellProps = {
  title: string;
  /** Preferred prop */
  description?: string;
  /** Back-compat alias used by some pages */
  subtitle?: string;
  className?: string;
  children: React.ReactNode;
  backHref?: string;
  backLabel?: string;
};

export default function ToolShell({
  title,
  description,
  subtitle,
  className,
  children,
  backHref = "/laser-toolkit",
  backLabel = "Back to Toolkit",
}: ToolShellProps) {
  const desc = description ?? subtitle;

  return (
    <div className={cn("mx-auto w-full max-w-5xl px-4 py-6", className)}>
      <div className="mb-6 flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
          {desc ? (
            <p className="mt-1 text-sm text-muted-foreground">{desc}</p>
          ) : null}
        </div>

        <Link
          href={backHref}
          className="inline-flex h-9 items-center rounded-md border border-input bg-background px-3 text-sm shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
        >
          {backLabel}
        </Link>
      </div>

      {children}
    </div>
  );
}