Untitled

import React from "react";
import { MemoizedFields } from "../types/listingPageTypes";
import Breadcrumb from "~/ui/Breadcrumb";
import { cn } from "~/utils";
import VideoSectionListingPage from "./VideoSectionListingPage";
import ContentListingPage from "./ContentListingPage";

interface PageHeaderProps {
  memoizedFields: MemoizedFields;
  hasVideo: boolean;
  category: { handle: string };
}

const PageHeaderListingPage: React.FC<PageHeaderProps> = React.memo(({ memoizedFields, hasVideo, category }) => (
  <div className="w-full pb-10" data-element="preferiti-di-cristina-page-header">
    <Breadcrumb
      items={[
        {
          label: memoizedFields.titolo_menu?.value ?? '',
          url: `/custom/${category.handle}`,
        },
      ]}
    />
    <div className="flex flex-col md:container md:mx-auto">
      {memoizedFields.titolo_menu && (
        <span className="md:hidden text-[14px] leading-[18px] font-bold text-rhodamine uppercase">
          {memoizedFields.titolo_menu.value}
        </span>
      )}
      
      <div className="flex flex-col md:flex-row items-center">
        <ContentListingPage
          memoizedFields={memoizedFields}
          hasVideo={hasVideo}
          className="order-2 md:order-1 flex-1 mb-4 md:mb-0"
        />
        {hasVideo && memoizedFields.video && (
            <VideoSectionListingPage
              video={memoizedFields.video}
              className="order-1 md:order-2 flex-1 my-3 md:my-0"
            />
        )}
      </div>
    </div>

  </div>
));

export default PageHeaderListingPage;