import type { ReactNode } from 'react';

import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
import { PageBody } from '@kit/ui/page';

import { TeamAccountLayoutPageHeader } from '~/home/[account]/_components/team-account-layout-page-header';

interface CmsPageShellProps {
  account: string;
  title: string;
  description?: string;
  /** Override breadcrumb labels for URL path segments (e.g. UUID → name) */
  breadcrumbValues?: Record<string, string>;
  children: ReactNode;
}

/**
 * Shared CMS page shell — wraps PageBody + header + breadcrumbs.
 * Use in every CMS feature page to maintain consistent layout.
 */
export function CmsPageShell({
  account,
  title,
  description,
  breadcrumbValues,
  children,
}: CmsPageShellProps) {
  return (
    <>
      <TeamAccountLayoutPageHeader
        account={account}
        title={title}
        description={
          description !== undefined ? (
            description
          ) : (
            <AppBreadcrumbs values={breadcrumbValues} />
          )
        }
      />

      <PageBody>{children}</PageBody>
    </>
  );
}