import { ScrollView, Text, StyleSheet, View } from 'react-native';
import React, { useEffect, useState } from 'react';
import { CardDeUna, DatosCard } from './card';
interface Props {
  datos?: DatosCard[];
  backgroundColor?: string;
  title?: string;
}

export function Sectioncard({
  datos,
  title = 'Promociones',
}: Props): JSX.Element {
  const [dataCard, setDataCard] = useState([] as any);
  useEffect(() => {
    setDataCard(datos);
  }, [datos]);
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.text1}>{title}</Text>
      <View style={styles.container}>
        {dataCard &&
          dataCard.map((item: any,key:number) => {
            return <CardDeUna key={key} datos={item} backgroundColor="white" />;
          })}
      </View>
    </ScrollView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    width: '100%',
    marginVertical: 10,
  },
  text1: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'black',
    marginHorizontal: 20,
    marginVertical: 10,
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});