'use client';

/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useStores } from '@/app/(root)/AppProviders';
import UserCard from '@/app/(root)/search/UserCard';
import { CAROUSEL_ITEM_GAP_MULTIPLIER } from '@/utils/constants';
import { PageEventType, eventLogger } from '@/utils/event-logger';

export const UserCardItem = ({
  index,
  style,
  data,
}: {
  index: number;
  style: any;
  data: any;
}) => {
  const { elements } = data;
  const { session } = useStores();
  const user = elements[index];
  return (
    <div
      style={{
        ...style,
        left:
          index === 0 ? style.left : style.left * CAROUSEL_ITEM_GAP_MULTIPLIER,
      }}
      onClick={() => {
        eventLogger.logWebPageEvent({
          userId: session.userId,
          eventType: PageEventType.CLICK,
          element: data['sectionName'] || '',
          secondaryElementIndex: index,
          entityId: user.handle,
          entityType: 'user',
        });
      }}
    >
      <UserCard
        display_name={user.display_name}
        avatar_image_url={user.avatar_image_url}
        handle={user.handle}
        followers_count={user.stats.followers_count}
      />
    </div>
  );
};