"use client";

import type { CustomerRow } from "@/app/dashboard/customers/_components/schema";
import { PortalAccessTabs } from "@/components/admins/portal/portal-access-tabs";
import { TenantPicker } from "@/components/admins/portal/tenant-picker";

type PortalSectionShellProps = {
  customers: CustomerRow[];
  selectedCustomerId: number | null;
  children: React.ReactNode;
};

export function PortalSectionShell({
  customers,
  selectedCustomerId,
  children,
}: PortalSectionShellProps) {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-end justify-between gap-4 rounded-2xl border bg-card p-4 shadow-sm">
        <div className="space-y-3">
          <div>
            <h2 className="font-semibold text-base">Portal ACL</h2>
            <p className="text-muted-foreground text-sm">
              Manage customer portal apps, roles, and users from the dashboard.
            </p>
          </div>
          <PortalAccessTabs />
        </div>
        <TenantPicker customers={customers} selectedCustomerId={selectedCustomerId} />
      </div>
      {children}
    </div>
  );
}