'use client';

import { VirtuosoGrid } from 'react-virtuoso';

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

import { CreatorListData } from '@/types/Creator';

interface CreatorListerProps {
  creators: CreatorListData[];
}

const CreatorLister: React.FC<CreatorListerProps> = ({ creators }) => {
  const listClassName =
    'grid grid-cols-1 c-xs:grid-cols-2 c-md:grid-cols-3 c-lg:grid-cols-4 c-xl:grid-cols-5 c-2xl:grid-cols-6 c-3xl:grid-cols-7 c-4xl:grid-cols-8 gap-2 c-lg:gap-3';

  // testing both - virtualized and non-virtualized lists
  return (
    // <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-4 lg:gap-8">
    //   {creators?.map((creator, index) => (
    //     <div key={creator?.id || index} className="aspect-square">
    //       <CreatorCard creator={creator} />
    //     </div>
    //   ))}
    // </div>
    <VirtuosoGrid
      totalCount={creators?.length}
      listClassName={listClassName}
      itemClassName="min-w-0 h-full"
      useWindowScroll
      itemContent={(index) => <CreatorCard creator={creators?.[index]} />}
      computeItemKey={(index) => creators?.[index]?.id}
    />
  );
};

export default CreatorLister;