'use client';

import DiscoverCarousel, {
  DiscoverCarouselProps,
} from '@/components/carousel/carousels/DiscoverCarousel';
import ShortcutItem, {
  ShortcutType,
} from '@/components/shortcuts/ShortcutItem';
import { components } from '@/lib/gen';

type ShortcutItemSchema = components['schemas']['ShortcutItemSchema'];

const renderItem: DiscoverCarouselProps<ShortcutItemSchema>['renderItem'] = ({
  item,
  index,
  ...restItemProps
}) => {
  return (
    <ShortcutItem
      id={item.id as ShortcutType}
      title={item.name}
      description={item.description || ''}
      imageUrl={item.image_url}
      redirectUrl={item.redirect_url || ''}
      playlistContextId={`${item.id}${item.shortcut_context ? `-${item.shortcut_context.song_id}` : `-${index}`}`}
      shortcutContext={item.shortcut_context || {}}
      index={index}
      {...restItemProps}
    />
  );
};

export const ShortcutRowSection = ({
  title,
  items,
  className,
}: {
  title: string;
  items: ShortcutItemSchema[];
  className?: string;
}) => {
  return (
    <DiscoverCarousel
      title={title}
      renderItem={renderItem}
      items={items}
      className={className}
    />
  );
};

export default ShortcutRowSection;