import type { PressableProps } from 'react-native';
import { Pressable, Text, View } from 'react-native';

export const ActionRow = ({
  detail,
  label,
  ...props
}: PressableProps & {
  detail?: string;
  label: string;
}) => (
  <Pressable
    className='border-border min-h-14 flex-row items-center justify-between gap-3 border-b py-3'
    {...props}
  >
    <View className='min-w-0 flex-1'>
      <Text className='text-foreground font-medium'>{label}</Text>
      {detail ? (
        <Text className='text-muted-foreground mt-1 text-xs'>{detail}</Text>
      ) : null}
    </View>
    <Text className='text-muted-foreground text-lg'>›</Text>
  </Pressable>
);