import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, View, Text, FlatList } from 'react-native';
import { CardsSabiasQue } from './CardsSabiasQue';
import type { Props as CardPropiedad } from './CardsSabiasQue';
export interface Props {
  numResult: number;
  datos: Comentarios[];
}
export interface datos {
  text: string;
  title: string;
}
interface Comentarios {
  text: string;
  background: string;
  key: number;
  datos: datos[];
}
export function SabiasQue({ numResult = 5, datos }: Props): JSX.Element {
  const [data, setData] = useState(datos);

  const renderItem = ({ item }: CardPropiedad) => {
    return <CardsSabiasQue item={item} />;
  };
  useEffect(() => {
    setData(datos);
  }, [datos]);
  return (
    <View style={styles.contain}>
      <Text style={styles.title}>¿Sabias Que?</Text>
      <SafeAreaView style={styles.container}>
        <FlatList
          data={data.slice(0, numResult)}
          renderItem={renderItem}
          horizontal
        />
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contain: {
    backgroundColor: '#ffff',
    width: '100%',
    height: 230,
    padding: 10,
  },
  title: {
    marginLeft: 17,
    marginBottom: 10,
    fontWeight: 'bold',
    fontSize: 18,
  },
});