'use client';

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

/* eslint jsx-a11y/no-static-element-interactions: warn */
import { useRouter } from 'next/navigation';

import { useStores } from '@/app/(root)/AppProviders';
import CategoryCard from '@/components/card/CategoryCard';
import { CAROUSEL_ITEM_GAP_MULTIPLIER } from '@/utils/constants';
import { PageEventType, eventLogger } from '@/utils/event-logger';

export const CategoryCardItem = ({
  index,
  style,
  data,
}: {
  index: number;
  style: any;
  data: any;
}) => {
  const { elements } = data;
  const { session } = useStores();
  const category = elements[index];

  const router = useRouter();
  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: category.name || '',
          entityType: 'category',
        });
      }}
    >
      <CategoryCard
        category={category?.name || ''}
        imageUrl={category?.image_url || ''}
        onClick={() => router.push(`/style/${category.name}`)}
      />
    </div>
  );
};