import React from 'react'
import { CountryCard } from '../types/CountryCard'
import { CarouselCountry } from './CarouselCountry'
import { Carousel } from './Carousel'
import { TimeInterval } from '../types/TimeInterval'

export const CountriesCarousel: React.FC<{
  countries: CountryCard[]
  onSwipe: (country: CountryCard, rank: number) => void
  onPressCountry: (country: CountryCard) => void
  width: number
  timeInterval: TimeInterval
}> = ({ countries, onSwipe, onPressCountry, timeInterval }) => (
  <Carousel<CountryCard>
    items={countries}
    onSwipe={onSwipe}
    renderItem={({ item, index }) => (
      <CarouselCountry
        item={item}
        index={index}
        timeInterval={timeInterval}
        onPressItem={onPressCountry}
      />
    )}
    style={{ flex: 1 }}
  />
)