'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 PlaylistCard from '@/components/card/PlaylistCard';
import { CAROUSEL_ITEM_GAP_MULTIPLIER } from '@/utils/constants';
import { PageEventType, eventLogger } from '@/utils/event-logger';

export const PlaylistCardItem = ({
  index,
  style,
  data,
}: {
  index: number;
  style: any;
  data: any;
}) => {
  const { elements } = data;

  const { session } = useStores();
  const playlist = elements[index];

  return (
    <div
      style={{
        ...style,
        left:
          index === 0 ? style.left : style.left * CAROUSEL_ITEM_GAP_MULTIPLIER,
        height: 'fit-content',
      }}
      onClick={() => {
        eventLogger.logWebPageEvent({
          userId: session.userId,
          eventType: PageEventType.CLICK,
          element: data['sectionName'] || '',
          secondaryElementIndex: index,
          entityId: playlist?.id || '',
          entityType: 'playlist',
        });
      }}
    >
      <PlaylistCard playlist={playlist} showPlaylistStats={true} />
    </div>
  );
};