import React, { memo } from 'react'
import { StyleSheet } from 'react-native'
import { ReactComponent as PaginationPrevious } from 'assets/pagination-previous.svg'
import { ReactComponent as PaginationNext } from 'assets/pagination-next.svg'

import type { PaginationArrowProps } from './TableTypes'

const PaginationArrow = ({ direction, theme }: PaginationArrowProps) => {
  if (direction === 'next') {
    return <PaginationNext style={styles.icon} fill={theme.cellText.color} />
  } else if (direction === 'previous') {
    return (
      <PaginationPrevious style={styles.icon} fill={theme.cellText.color} />
    )
  } else {
    throw new Error('Invalid direction')
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 20,
    height: 20,
  },
})

export default memo(PaginationArrow)