import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Switch } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { AppColors } from '@/constants/theme';

interface SettingItemProps {
  icon: string;
  label: string;
  description?: string;
  type: 'arrow' | 'toggle';
  value?: boolean;
  onPress?: () => void;
  onToggle?: (value: boolean) => void;
  isLast?: boolean;
}

export function SettingItem({ 
  icon, 
  label, 
  description, 
  type, 
  value = false,
  onPress, 
  onToggle,
  isLast = false,
}: SettingItemProps) {
  const handlePress = () => {
    if (type === 'arrow' && onPress) {
      onPress();
    }
  };

  return (
    <TouchableOpacity 
      style={[styles.container, !isLast && styles.border]}
      onPress={handlePress}
      activeOpacity={type === 'arrow' ? 0.7 : 1}
      disabled={type === 'toggle'}
    >
      <View style={styles.iconContainer}>
        <Ionicons 
          name={icon as any} 
          size={20} 
          color={AppColors.deepPurple} 
        />
      </View>
      
      <View style={styles.content}>
        <Text style={styles.label}>{label}</Text>
        {description && (
          <Text style={styles.description}>{description}</Text>
        )}
      </View>
      
      {type === 'arrow' ? (
        <Ionicons 
          name="chevron-forward" 
          size={18} 
          color={AppColors.slatePurple} 
        />
      ) : (
        <Switch
          value={value}
          onValueChange={onToggle}
          trackColor={{ 
            false: AppColors.slatePurple, 
            true: AppColors.mediumPurple 
          }}
          thumbColor={AppColors.white}
          ios_backgroundColor={AppColors.slatePurple}
        />
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
  },
  border: {
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(32, 0, 40, 0.06)',
  },
  iconContainer: {
    width: 36,
    height: 36,
    borderRadius: 10,
    backgroundColor: AppColors.lavender,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  content: {
    flex: 1,
  },
  label: {
    fontSize: 15,
    color: AppColors.deepPurple,
  },
  description: {
    fontSize: 12,
    color: AppColors.slatePurple,
    marginTop: 2,
  },
});