import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useSettings } from '@/theme';
import Svg, { Path } from 'react-native-svg';

interface ListItemProps {
  title: string;
  subtitle?: string;
  leftElement?: React.ReactNode;
  rightElement?: React.ReactNode;
  onPress?: () => void;
  showChevron?: boolean;
}

export function ListItem({ title, subtitle, leftElement, rightElement, onPress, showChevron }: ListItemProps) {
  const { theme } = useSettings();
  const isInteractive = onPress || showChevron;

  return (
    <TouchableOpacity
      style={[
        styles.container,
        { backgroundColor: theme.card, borderColor: theme.border },
        isInteractive && styles.interactive,
      ]}
      onPress={onPress}
      activeOpacity={0.7}
      disabled={!isInteractive}
      accessibilityRole={isInteractive ? 'button' : 'none'}
      accessibilityLabel={title}
      accessibilityHint={subtitle ? subtitle : undefined}
      accessibilityState={{ disabled: !isInteractive }}
    >
      {leftElement && <View style={styles.leftElement}>{leftElement}</View>}
      <View style={styles.leftContent}>
        <Text style={[styles.title, { color: theme.text }]}>{title}</Text>
        {subtitle && <Text style={[styles.subtitle, { color: theme.textMuted }]}>{subtitle}</Text>}
      </View>
      <View style={styles.rightContent}>
        {rightElement}
        {showChevron && !rightElement && (
          <Svg width={20} height={20} viewBox="0 0 24 24">
            <Path
              d="M9 18l6-6-6-6"
              stroke={theme.textSecondary}
              strokeWidth={2.5}
              strokeLinecap="round"
              strokeLinejoin="round"
              fill="none"
            />
          </Svg>
        )}
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 14,
    paddingHorizontal: 16,
    borderRadius: 12,
    borderWidth: 1,
    marginBottom: 8,
  },
  interactive: {},
  leftElement: {
    marginRight: 12,
  },
  leftContent: {
    flex: 1,
    gap: 2,
  },
  title: {
    fontSize: 16,
    fontWeight: '500',
  },
  subtitle: {
    fontSize: 13,
  },
  rightContent: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
});