import React from 'react'
import { View } from 'react-native'

import { ListItemContainer } from '../ListItemContainer'
import { ListItemRank } from '../ListItemRank'
import { ListItemInfoStreamsWithChange } from '../ListItemStreamsWithChange'
import { ListItemTitle } from '../ListItemTitle'

interface Item {
  name: string
  streams: { current: number; previous: number }
  maxStreams: number
  selected: boolean
}

export const CountryStreamsListItem: React.FC<{
  index: number
  item: Item
  onPress?: () => void
}> = ({ index, item, onPress }) => {
  return (
    <ListItemContainer onPress={onPress}>
      <View
        style={{
          flex: 1,
          alignContent: 'center',
          justifyContent: 'center',
          alignSelf: 'center',
          marginTop: -24,
        }}
      >
        <ListItemRank index={index - 1} />
      </View>
      <View
        style={{
          flex: 7,
          alignContent: 'center',
          alignSelf: 'center',
          paddingRight: 8,
        }}
      >
        <ListItemTitle title={item.name} />
        <ListItemInfoStreamsWithChange currentPeriod={item.streams.current} />
      </View>
    </ListItemContainer>
  )
}