import React, { memo } from 'react'
import { StyleSheet } from 'react-native'
import { ReactComponent as SortAsc } from 'assets/sort-asc.svg'
import { ReactComponent as SortDesc } from 'assets/sort-desc.svg'

import type { SortArrowProps } from './TableTypes'

const SortIndicatorArrow = ({ direction, theme }: SortArrowProps) => {
  if (direction === 'asc') {
    return <SortAsc style={styles.icon} fill={theme.headerText.color} />
  } else if (direction === 'desc') {
    return <SortDesc style={styles.icon} fill={theme.headerText.color} />
  } else {
    throw new Error('Invalid direction')
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 16,
    height: 16,
    marginLeft: 8,
    verticalAlign: 'middle',
  },
})

export default memo(SortIndicatorArrow)