import { Text, TouchableOpacity } from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { OrderDirection } from '../graphql/__generated__/sdk'

export const OrderDirectionButton: React.FC<{
  orderDirection: OrderDirection
  onPress: () => void
  label: string
}> = ({ orderDirection, onPress, label }) => (
  <TouchableOpacity
    style={{
      alignItems: 'center',
      justifyContent: 'center',
      height: 36,
      borderRadius: 8,
      backgroundColor: colors.metals.metal2,
    }}
    onPress={onPress}
  >
    <Text
      style={[
        TextStyles.tinyCaps,
        {
          color: colors.white,
          textTransform: 'uppercase',
        },
      ]}
    >
      {`${label} ${orderDirection === OrderDirection.Asc ? '↑' : '↓'}`}
    </Text>
  </TouchableOpacity>
)