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';

export default async function Layout({
  data,
  children,
  breadcrumbData
}: {
  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>
      <ListPage data={data} />
    </>
  );
}
