import React, { type ReactNode } from 'react'
import { Pressable, StyleSheet } from 'react-native'
import { useAtFontScaleBreakpoint, useTheme } from '../../../hooks'
import { platformPressedOpacityStyle } from '../../../utils'

interface ResultRowProps {
  accessibilityLabel: string
  onPress: () => void
  alignItems?: 'flex-start' | 'center'
  children: ReactNode
}

export function ResultRow({
  accessibilityLabel,
  onPress,
  alignItems = 'flex-start',
  children,
}: ResultRowProps) {
  const { colors } = useTheme()
  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
  const styles = useStyles()

  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={accessibilityLabel}
      onPress={onPress}
      style={({ pressed }) => [
        styles.row,
        atFontScaleBreakpoint ? styles.stacked : { alignItems },
        pressed && platformPressedOpacityStyle,
      ]}
      android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
    >
      {children}
    </Pressable>
  )
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    row: {
      flexDirection: 'row',
      gap: 8,
      paddingVertical: 12,
      paddingHorizontal: 16,
      borderBottomWidth: 1,
      borderBottomColor: colors.borderColorDefaultDim,
    },
    stacked: {
      flexDirection: 'column',
      alignItems: 'stretch',
      borderBottomColor: colors.borderColorDefaultDark,
    },
  })
}