import { StyleSheet, Text, View, Pressable } from 'react-native'
import { TEXT } from '@/src/shared/constants/colors'
import { SPACING } from '@/src/shared/constants/spacing'

export interface NativeLabeledRowProps {
  label: string
  value?: string
  icon?: string
  chevron?: boolean
  onPress?: () => void
  children?: React.ReactNode
  testID?: string
}

export function NativeLabeledRow(props: NativeLabeledRowProps) {
  const { label, value, chevron, onPress, children } = props

  const content = (
    <View style={styles.row}>
      <Text style={styles.label}>{label}</Text>
      <View style={styles.right}>
        {value ? <Text style={styles.value}>{value}</Text> : null}
        {children}
        {chevron ? <Text style={styles.chevron}>&#8250;</Text> : null}
      </View>
    </View>
  )

  if (onPress) {
    return <Pressable onPress={onPress}>{content}</Pressable>
  }

  return content
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    minHeight: 44,
    paddingHorizontal: SPACING[4],
    paddingVertical: SPACING[3],
  },
  label: {
    fontSize: 17,
    color: TEXT.PRIMARY,
    flex: 1,
  },
  right: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: SPACING[2],
  },
  value: {
    fontSize: 17,
    color: TEXT.TERTIARY,
  },
  chevron: {
    fontSize: 20,
    color: TEXT.TERTIARY,
    marginLeft: SPACING[1],
  },
})
