import { StyleSheet, View } from 'react-native'
import { TextButton } from '../../../components'

interface ViewMoreLinkRowProps {
  onPress: () => void
  accessibilityHint: string
  expanded?: boolean
}

export const ViewMoreLinkRow = ({
  accessibilityHint,
  expanded = false,
  onPress,
}: ViewMoreLinkRowProps) => {
  const styles = useRowStyles()

  return (
    <View style={[styles.row]}>
      <TextButton
        onPress={onPress}
        accessibilityHint={accessibilityHint}
        accessibilityState={{ expanded }}
      >
        {expanded ? 'View less' : 'View more'}
      </TextButton>
    </View>
  )
}

const useRowStyles = () => {
  return StyleSheet.create({
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
      paddingHorizontal: 16,
    },
  })
}