import React, { useRef } from 'react';
import { ScrollView } from 'react-native';
import { MarketKpiCard } from './market-kpi-card';
import { TKpiData } from '../types';
import { useRestoreScroll } from '../../common/hooks/use-restore-scroll';

type TProps = {
  data: TKpiData[];
};

export const MarketKpiSlider: React.FC<TProps> = ({ data }) => {
  const scrollViewRef = useRef<ScrollView>(null);
  const { onScrollEndHandler } = useRestoreScroll(scrollViewRef);

  return (
    <ScrollView
      testID="market-kpi"
      scrollEnabled
      horizontal
      showsHorizontalScrollIndicator={false}
      ref={scrollViewRef}
      onScrollEndDrag={onScrollEndHandler}
      contentContainerStyle={{ paddingRight: 16 }}
    >
      {data && data.map(item => <MarketKpiCard key={item.id} {...item} />)}
    </ScrollView>
  );
};