import clsx from 'clsx';
import { BreadcrumbResultType, GetCategoryResponse } from '@akinon/next/types';
import Breadcrumb from '@theme/views/breadcrumb';
import { CategoryBanner } from '@theme/views/category/category-banner';
import ListPage from '@theme/views/category/category-info';
import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';

export default async function Layout({
  data,
  children,
  breadcrumbData,
  pageContext
}: {
  data: GetCategoryResponse;
  children?: React.ReactNode;
  breadcrumbData?: BreadcrumbResultType[];
  pageContext?: Record<string, unknown>;
}) {
  return (
    <>
      <div
        className={clsx(
          data?.category?.attributes?.category_banner
            ? 'relative w-full'
            : 'container px-4 mx-auto lg:px-0 lg:my-4'
        )}
      >
        {children}
        <div
          className={clsx(
            'my-4 lg:mt-7',
            data?.category?.attributes?.category_banner &&
              'lg:absolute lg:inset-x-0 z-10 container lg:my-4 mx-auto'
          )}
        >
          <Breadcrumb breadcrumbList={breadcrumbData} />
        </div>
        <CategoryBanner {...data?.category?.attributes?.category_banner} />
      </div>
      {/* The listing context was built on every request and thrown away: the
          prop was declared and never read, so no listing binding has ever
          resolved on any brand. */}
      <ChromeSlot
        slug={PLACEHOLDER_SLUGS.productListing}
        fallback={<ListPage data={data} />}
        pageContext={pageContext}
      />
    </>
  );
}