import type { ReactNode } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { AppIcon } from './app-icon';
import { colors, fonts, m3Colors, spacing } from '../theme/proulr-theme';

export function ListItem({
  avatar,
  title,
  subtitle,
  trailing,
  onPress,
  showDivider,
  showChevron,
}: {
  avatar?: ReactNode;
  title: string;
  subtitle?: string;
  trailing?: ReactNode;
  onPress?: () => void;
  showDivider?: boolean;
  showChevron?: boolean;
}) {
  const navChevron = onPress && showChevron !== false && !trailing;

  const inner = (
    <>
      {avatar ? <View style={styles.listAvatar}>{avatar}</View> : null}
      <View style={styles.listContent}>
        <Text style={styles.listTitle} numberOfLines={1}>
          {title}
        </Text>
        {subtitle ? (
          <Text style={styles.listSubtitle} numberOfLines={1}>
            {subtitle}
          </Text>
        ) : null}
      </View>
      {navChevron ? <AppIcon name="chevron-right" size={22} color={m3Colors.onSurfaceVariant} /> : null}
      {trailing ? <View style={styles.listTrailing}>{trailing}</View> : null}
    </>
  );

  if (onPress) {
    return (
      <Pressable style={[styles.listItem, showDivider && styles.listItemDivider]} onPress={onPress}>
        {inner}
      </Pressable>
    );
  }
  return <View style={[styles.listItem, showDivider && styles.listItemDivider]}>{inner}</View>;
}

const styles = StyleSheet.create({
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.md,
    paddingVertical: spacing.md,
  },
  listItemDivider: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: colors.border,
  },
  listAvatar: {},
  listContent: { flex: 1 },
  listTitle: { color: colors.textPrimary, fontSize: 15, fontFamily: fonts.semibold },
  listSubtitle: { color: colors.textSecondary, fontSize: 13, marginTop: 2 },
  listTrailing: { alignItems: 'flex-end' },
});