import React from 'react';
import { View, Text, Image } from 'react-native';
import Swiper from 'react-native-deck-swiper';

const renderCard = (card) => {
  return (
    <View style={styles.card}>
      <Image
        style={{width: 120, height: 120, borderRadius: 60}}
        source={card.image}
      />
      <Text style={styles.text}>{card.text}</Text>
    </View>
  )
}

const LessonItem = ({cards}) => {
  const {defaultStyle} = styles;

  return (
    <View style={defaultStyle}>
      <Swiper
        backgroundColor='#7270a8'
        cards={cards}
        renderCard={renderCard}
        disableBottomSwipe={true}
        disableTopSwipe={true}
        disableRightSwipe={true}
      >
      </Swiper>
    </View>
  );
};

const styles = {
  defaultStyle: {
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#7270a8',
    flex: 1
  },
  card: {
    flex: 1,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#E8E8E8',
    justifyContent: 'center',
    backgroundColor: 'white',
    alignItems: 'center'
  },
  text: {
    margin: 20,
    color: 'black',
    textAlign: 'justify',
    fontSize: 14,
    lineHeight: 18
  },
};

export default LessonItem;