import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { TextStyles } from '../Styles'
import FilterChevron from '../icons/FilterChevron'

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    justifyContent: 'center',
    marginHorizontal: 4,
  },
  buttonText: {
    ...TextStyles.micro,
    color: 'white',
    textTransform: 'uppercase',
  },
})

export const FilterText: React.FC = ({ children }) => (
  <Text style={styles.buttonText}>{children}</Text>
)

export const Filter: React.FC<{ onPress: () => void; label: string }> = ({
  onPress,
  label,
}) => (
  <View style={styles.container}>
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <FilterText>{label}</FilterText>
      <FilterChevron
        style={{
          // Chevron is offset to keep the text centered to screen
          position: 'absolute',
          right: -14,
          top: 3.5,
        }}
      />
    </TouchableOpacity>
  </View>
)