'use client';

import { useTranslations } from 'next-intl';

import FeaturedCreationsBlock from '@/components/FeaturedCreationsBlock';
import CreatorEventsInline from '@/components/creators/CreatorEventsInline';

import { CreationListItem } from '@/types/Creation';
import { Event } from '@/types/Events';

interface FeaturedSelectionClientProps {
  featuredCreations: CreationListItem[];
  creatorId: string;
  events: Event[];
}

const FeaturedSelectionClient: React.FC<FeaturedSelectionClientProps> = ({
  featuredCreations,
  creatorId,
  events,
}) => {
  const tCreationPage = useTranslations('creationPage');
  return (
    <div className="flex flex-col gap-6 lg:gap-10">
      <CreatorEventsInline events={events} maxItems={3} />
      <FeaturedCreationsBlock
        leftTitle={tCreationPage('featuredCreations')}
        creations={featuredCreations}
        creatorId={creatorId}
        hasOtherCreationsButtons
      />
    </div>
  );
};

export default FeaturedSelectionClient;