import { notFound } from "next/navigation";
import type { ReactNode } from "react";
import { fetchTenantBySlug } from "@/lib/tenant-registry";

export default async function TenantLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const tenant = await fetchTenantBySlug(slug);
  if (!tenant) notFound();

  return (
    <div>
      <header
        style={{
          padding: "12px 24px",
          borderBottom: "1px solid #eaeaea",
          background: "white",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <strong>{tenant.name}</strong>
        <span style={{ fontSize: 12, color: "#666" }}>
          {tenant.plan} · {tenant.status}
        </span>
      </header>
      <main style={{ padding: 24 }}>{children}</main>
    </div>
  );
}