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

export const ListRow = ({
  title,
  subtitle,
  meta,
  children,
  onPress,
  ...props
}: {
  title: string;
  subtitle?: string;
  meta?: string;
  children?: ReactNode;
  onPress?: () => void;
} & Omit<ComponentProps<typeof Pressable>, 'children'>) => (
  <Pressable
    className='border-border bg-card rounded-lg border p-4'
    onPress={onPress}
    {...props}
  >
    <View className='flex-row items-start justify-between gap-3'>
      <View className='min-w-0 flex-1'>
        <Text className='text-foreground font-semibold'>{title}</Text>
        {subtitle ? (
          <Text className='text-muted-foreground mt-1 text-sm'>{subtitle}</Text>
        ) : null}
      </View>
      {meta ? (
        <Text className='text-muted-foreground text-xs'>{meta}</Text>
      ) : null}
    </View>
    {children ? <View className='mt-3'>{children}</View> : null}
  </Pressable>
);