'use client';

import { useTranslations } from 'next-intl';

import CreatorLister from '@/components/creators/CreatorLister';

// import StickyCategoryHeader from "@/components/StickyCategoryHeader";
import { CreatorListData } from '@/types/Creator';

interface CreatorListClientProps {
  title: string;
  creators: CreatorListData[];
  hasCategoryHeader?: boolean;
}

const CreatorListClient: React.FC<CreatorListClientProps> = ({
  // title,
  creators,
  // hasCategoryHeader = true,
}) => {
  const t = useTranslations('creatorListPage');
  return (
    <div className="flex-1 w-full px-site pb-page flex flex-col gap-4 sm:gap-10 lg:gap-12 pt-page md:pt-0">
      {/* {hasCategoryHeader && <StickyCategoryHeader title={title} />} */}

      {creators && creators.length > 0 ? (
        <CreatorLister creators={creators} />
      ) : (
        <div className="w-full text-mma-blue self-center flex flex-col gap-2 h-[60vh]">
          <div className="text-xl font-bold">{t('noData')}</div>
          <div className="text-sm">{t('selectDifferentFilters')}</div>
        </div>
      )}
    </div>
  );
};

export default CreatorListClient;