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

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

export const SelectorModalButton: React.FC<{
  label: string
  isSelected: boolean
  onPress: () => void
}> = ({ label, isSelected, onPress }) => (
  <TouchableOpacity
    onPress={onPress}
    style={[
      {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 48,
        borderWidth: 2,
        borderRadius: 8,
        marginBottom: 8,
        paddingHorizontal: 8,
      },
      isSelected
        ? {
            borderWidth: 2,
            paddingHorizontal: 8,
            borderColor: colors.metals.metal1,
          }
        : {
            backgroundColor: colors.metals.metal2,
            borderWidth: 0,
          },
    ]}
    accessibilityLabel={label}
    accessibilityRole="radio"
    accessibilityValue={{ text: label }}
    accessibilityState={{ selected: isSelected }}
  >
    <Text
      style={[
        {
          ...TextStyles.body,
          marginVertical: 8,
          color: colors.white,
        },
      ]}
    >
      {label}
    </Text>
  </TouchableOpacity>
)