import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
export interface Props {
  item: {
    text: string;
    background: string;
    key: number;
    datos: DataCard[];
  };
}
export interface DataCard {
  text: string;
  title: string;
}

export const CardsSabiasQue = ({ item }: Props) => {
  const navigate = useNavigation<any>();
  function NavigationScreen() {
    navigate.navigate('InformacionCard', { key: [...item.datos] });
  }
  return (
    <TouchableOpacity onPress={NavigationScreen}>
      <View style={{ ...styles.container, backgroundColor: item.background }}>
        <Text style={styles.description}>{item.text}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 200,
    marginLeft: 15,
    height: 150,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    boxShadow: 'inset 5em 1em gold',
    shadowColor: '#000',
    padding: 10,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  description: {
    fontWeight: 'bold',
    fontSize: 16,
    color: '#1b003a',
  },
});