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

import { colors } from '../Colors'
import { TextStyles } from '../Styles'
import { Strings } from '../i18n'

export const DropdownButton: React.FC<{
  label: string
  onPress: () => void
  style?: StyleProp<ViewStyle>
}> = ({ label, onPress, style }) => {
  return (
    <TouchableOpacity
      style={[
        {
          height: 48,
          flexDirection: 'row',
          alignItems: 'center',
          borderWidth: 2,
          borderColor: colors.metals.metal1,
          borderRadius: 8,
          paddingVertical: 8,
          paddingHorizontal: 12,
        },
        style,
      ]}
      onPress={onPress}
      accessibilityLabel={Strings.Shared.Filters}
      accessibilityRole="menu"
      accessibilityValue={{ text: label }}
    >
      <Text
        style={[
          TextStyles.body,
          {
            color: colors.white,
            flex: 1,
          },
        ]}
      >
        {label}
      </Text>
      <Text
        style={[
          TextStyles.body,
          {
            color: colors.white,
            fontSize: 12,
            textAlign: 'center',
            width: 24,
            lineHeight: 24,
          },
        ]}
      >
        ▼
      </Text>
    </TouchableOpacity>
  )
}