Untitled

import React, { useRef } from 'react';
import { Card, Text, View } from 'react-native-ui-lib';
import { Image } from 'react-native';
import images from '../../../themes/assets/images';
import colors from '../../rb-constants/colors';
import { ScrollView } from 'react-native-gesture-handler';
import { StyleSheet } from 'react-native';
import { Dimensions } from 'react-native';
import { Animated } from 'react-native';
import DateFormat from '../../rb-components/DateFormat';
import { useGetLatestReport } from '../../../hooks/query/report';
const { width } = Dimensions.get('screen');
const itemWidth = (width / 6) * 2;
const padding = (width - itemWidth) / 2;
const offset = itemWidth;

function Item({ i, scrollX, data }) {

  const scale = scrollX.interpolate({
    inputRange: [-offset + i * offset, i * offset, offset + i * offset],
    outputRange: [0.8, 1.6, 0.8],
  });

  return (
    <View>
      <Animated.View style={[styles.item, { transform: [{ scale }] }]}>
        <View flex row spread centerV>
          <View style={{ backgroundColor: colors.white, height: itemWidth, width: itemWidth }}>
            <View center>
              <Image source={data.image} />

            </View>
            <View center flex>
              <Text>{data.name}</Text>
              <Text orange40 heading3>{data.followers}</Text>
            </View>
          </View>
        </View>
      </Animated.View>
    </View>
  );
}

function SocialFollowing() {
  const { data: report } = useGetLatestReport();
  const scrollX = useRef(new Animated.Value(0)).current;

  // console.log(report?.data?.score?.social?.find((s: { type: string; }) => s.type === 'facebook'))
  // console.log(report?.data?.score?.social[1]?.find((s: { type: string; }) => s.type === 'instagram'))
  // console.log(report?.data?.score?.social[2]?.find(((s: { type: string; }) => s.type === 'twitter'))
  // console.log(report?.data?.score?.social[3]?.find((s: { type: string; }) => s.type === 'linkedin'))
  // console.log(report?.data?.score?.social[4]?.find((s: { type: string; }) => s.type === 'youtube'))
  // console.log(report?.data?.score?.social[5]?.find(s => s.type === 'tiktok'))

  const cardData = [
    { name: 'Facebook', followers: (report?.data?.score?.social[0]?.numberOfFollowers ?? "N/A"), image: images.facebook },
    { name: 'Instagram', followers: (report?.data?.score?.social[1]?.numberOfFollowers ?? "N/A"), image: images.instagram },
    { name: 'Twitter', followers: (report?.data?.score?.social[2]?.numberOfFollowers ?? "N/A"), image: images.twitter },
    { name: 'Linkedin', followers: (report?.data?.score?.social[3]?.numberOfFollowers ?? "N/A"), image: images.linkedin },
    { name: 'Tiktok', followers: (report?.data?.score?.social[4]?.numberOfFollowers ?? "N/A"), image: images.tiktok },
    { name: 'Youtube', followers: (report?.data?.score?.social[5]?.numberOfFollowers ?? "N/A"), image: images.youtube },
  ];

  return (
    <>
      <View flex-1 centerV spread>
        <View center flex-1 spread>
          <Card borderRadius={20} padding-20 marginT-10 style={{ borderWidth: 1, borderColor: colors.grey, height: 120, width: width - 60 }}>
            <View paddingH-8 centerH centerV flex-1>
              <Text style={{ fontSize: 40 }} orange40 initials>
                {report?.socialMedia?.followers}
              </Text>
              <Text grey10 digits3>
                Total Social Following
              </Text>
            </View>
          </Card>
        </View>
        <ScrollView
          horizontal
          pagingEnabled
          contentContainerStyle={styles.scrollView}
          showsHorizontalScrollIndicator={false}
          snapToInterval={offset}
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
            useNativeDriver: false,
          })}
        >
          {cardData.map((data, i) => (
            <Item key={i} i={i} scrollX={scrollX} data={data} />
          ))}
        </ScrollView>
      </View>
      <DateFormat />
    </>
  );
}

export default SocialFollowing;

const styles = StyleSheet.create({
  scrollView: {
    paddingHorizontal: 115,
    alignItems: 'center',
  },
  item: {
    height: itemWidth,
    width: itemWidth,
    borderRadius: 10,
  },
});