import {type ReactNode} from 'react'
import {Pressable, type StyleProp, type ViewStyle} from 'react-native'

import {pending as pendingStyle, pressed} from '@/sprinkles'

// the tappable list-row touch target: pressed/pending opacity + button a11y
// in one place, so rows don't hand-roll Pressable state styles
export function PressableRow({
  accessibilityLabel,
  onPress,
  disabled = false,
  pending = false,
  style,
  children,
}: {
  accessibilityLabel: string
  onPress: () => void
  disabled?: boolean
  pending?: boolean
  style?: StyleProp<ViewStyle>
  children: ReactNode
}) {
  return (
    <Pressable
      accessibilityLabel={accessibilityLabel}
      accessibilityRole="button"
      disabled={disabled}
      onPress={onPress}
      style={({pressed: p}) => [
        p && pressed,
        pending && pendingStyle,
        style,
      ]}
    >
      {children}
    </Pressable>
  )
}
