import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ViewStyle,
  StyleProp,
} from "react-native";
import { useTheme } from "../contexts/ThemeContext";

interface ListItemProps {
  title: string;
  subtitle?: string;
  leftIcon?: React.ReactNode;
  rightElement?: React.ReactNode;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
}

/**
 * ListItem - Clean list item with optional icon and trailing element
 *
 * Usage:
 * - Settings lists
 * - Navigation items
 * - Selectable options
 *
 * Features:
 * - Optional left icon (wrap in IconContainer)
 * - Optional subtitle for additional context
 * - Optional right element (arrow, badge, switch, etc.)
 * - Optional onPress for touchable items
 */
export function ListItem({
  title,
  subtitle,
  leftIcon,
  rightElement,
  onPress,
  style,
}: ListItemProps) {
  const { colors, typography } = useTheme();

  const content = (
    <View style={[styles.container, style]}>
      {leftIcon && <View style={styles.leftIcon}>{leftIcon}</View>}
      <View style={styles.textContainer}>
        <Text style={[typography.h3, { color: colors.textPrimary }]}>
          {title}
        </Text>
        {subtitle && (
          <Text
            style={[
              typography.caption,
              { color: colors.textTertiary, marginTop: 2 },
            ]}
          >
            {subtitle}
          </Text>
        )}
      </View>
      {rightElement && <View style={styles.rightElement}>{rightElement}</View>}
    </View>
  );

  if (onPress) {
    return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
        {content}
      </TouchableOpacity>
    );
  }

  return content;
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 12,
    paddingHorizontal: 16,
    backgroundColor: "transparent",
  },
  leftIcon: {
    marginRight: 12,
  },
  textContainer: {
    flex: 1,
  },
  rightElement: {
    marginLeft: 12,
  },
});
