import React from 'react'
import { View, ScrollView, Text, StyleSheet, Image, ImageBackground, TouchableOpacity } from 'react-native'
import Theme from '../theme.style.js';

export default function BoardCarousel(props) {
  return (
    <View style={styles.container}>
    <ScrollView
      horizontal={true}
      contentContainerStyle={{ ...styles.scrollView, width: `${100 * props.intervals}%` }}
      showsHorizontalScrollIndicator={false}
      onContentSizeChange={props.onContentSizeChange}
      onScroll={props.onScroll}
      scrollEventThrottle={200}
      pagingEnabled
      decelerationRate="fast"
    >
    {props.items.map((item, index) => {
      return (
        <TouchableOpacity activeOpacity={1} key={index} style={{flex: 1, width: '100%', backgroundColor: '#fff', borderRadius: 15}}>
          <Image source={item ? {uri: item} : {uri: ''}} style={{width: '100%', height: '100%', resizeMode: 'stretch', borderRadius: 15}} />
        </TouchableOpacity>
      )
    })}
  </ScrollView>
  <View style={styles.bullets}>
    {props.bullets}
  </View>
  </View>)
}

const styles = StyleSheet.create({
  statsHead: {
    paddingTop: 10,
    paddingHorizontal: 12,
  },
  container: {
    height: '100%',
    width: '100%',
    backgroundColor: '#fbfbfb',
    shadowColor: '#fcfcfc',
    shadowOpacity: 1,
    shadowOffset: {
      width: 0,
      height: 5
    },
  },
  scrollView: {
    display: 'flex',
    flexDirection: 'row',
    overflow: 'hidden',
    width: '100%',
    height: '100%'
  },
  bullets: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    paddingTop: 20,
  }
});