import { View, Text, StyleSheet, Pressable } from 'react-native';
import React from 'react';
import { useRoute } from '@react-navigation/native';
import type { DataCard } from './CardsSabiasQue';
export const InformacionSabiasQue = () => {
  const route = useRoute<any>();
  const [data, setData] = React.useState<DataCard[]>(route.params.key);
  React.useEffect(() => {
    setData(route.params.key);
    console.log(data);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [route.params.key]);

  return (
    <View>
      {data &&
        data.map((item, key) => (
          <View key={`${item.text} ${item.title + key}`} style={styles.container}>
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.text}>{item.text}</Text>
          </View>
        ))}
      <View style={styles.container1}>
        <Pressable style={styles.button}>
          <Text>Regresar</Text>
        </Pressable>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    marginBottom: 40,
    marginHorizontal: 20,
    marginTop: 20,
  },
  container1: {
    marginBottom: 40,
    marginHorizontal: 20,
    marginTop: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  text: {
    marginTop: 10,
    fontSize: 18,
  },
  button: {
    backgroundColor: 'yellow',

    width: '100%',
    height: 50,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    color: 'black',
    marginTop: 20,
  },
});