// Pagination component
//  - pagination is a component that shows the current page and the total number of pages
// ----------------------------------------

import React from 'react'
import { View, StyleSheet, TouchableOpacity } from 'react-native'
import { colors, spacing } from '../theme'
import Text from './Text'
import Button from './Button'
import Row from './Row'
import List from './List'
import Paper from './Paper'
const Pagination = ({ totalPage, currentPage, onPrev, onNext }) => {
  return (
    <Row>
      <Button fullWidth={false} onPress={onPrev}>
        Prev
      </Button>
      <List
        horizontal
        data={[...Array(totalPage).keys()].map((i) => i + 1)}
        renderItem={({ item }) => (
          <View style={{ marginHorizontal: spacing.s_1 }}>
            <Button
              type={item == currentPage ? 'filled' : 'outlined'}
              mx={8}
              fullWidth={false}
              onPress={() => {}}
            >
              {item}
            </Button>
          </View>
        )}
      />

      <Button fullWidth={false} onPress={onNext}>
        Next
      </Button>
    </Row>
  )
}
export default Pagination