import { FlashList } from "@shopify/flash-list";
import { t } from "i18next";
import type React from "react";
import type { PropsWithChildren } from "react";
import { View, type ViewProps, type ViewStyle } from "react-native";
import { Text } from "@/components/common/Text";
import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
import type DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";

export interface SlideProps {
  slide: DiscoverSlider;
  contentContainerStyle?: ViewStyle;
}

interface Props<T> extends SlideProps {
  data: T[];
  renderItem: (item: T, index: number) => React.ReactElement | null;
  keyExtractor: (item: T) => string;
  onEndReached?: (() => void) | null | undefined;
}

const Slide = <T,>({
  data,
  slide,
  renderItem,
  keyExtractor,
  onEndReached,
  contentContainerStyle,
  ...props
}: PropsWithChildren<Props<T> & ViewProps>) => {
  return (
    <View {...props}>
      <Text className='font-bold text-lg mb-2 px-4'>
        {t(`search.${DiscoverSliderType[slide.type].toString().toLowerCase()}`)}
      </Text>
      <FlashList
        horizontal
        contentContainerStyle={{
          paddingHorizontal: 16,
          ...(contentContainerStyle ? contentContainerStyle : {}),
        }}
        showsHorizontalScrollIndicator={false}
        keyExtractor={keyExtractor}
        data={data}
        onEndReachedThreshold={1}
        onEndReached={onEndReached}
        renderItem={({ item, index }) =>
          item ? renderItem(item, index) : null
        }
      />
    </View>
  );
};

export default Slide;