export const Carousel = withCarouselContext(
  ({ extractImageUrl, ...props }: Props) => {
    const { width, height } = useWindowDimensions();
    return (
      <View>
        <CarouselRN
          style={styles.carousel}
          loop
          itemWidth={width - 60}
          inactiveOpacity={1}
          inactiveScale={0.82}
          renderItem={(data) => {
            return (
              <View
                style={{
                  borderRadius: 24,
                  width: width - 40,
                  height: 183,
                  overflow: 'hidden',
                  justifyContent: 'center',
                  zIndex: 300,
                }}
              >
                <Image
                  source={{ uri: data.item }}
                  style={[
                    { width: width },
                    styles.image,
                  ]}
                />
              </View>
            );
          }}
          {...props}
        />
      </View>
    );
  }
);

const styles = StyleSheet.create({
  image: {
    borderRadius: 24,
    height: 183,
  },
})