import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import Colors from '@/constants/Colors';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

type SupplicationListItemProps = {
  text: string;
  onPress: () => void;
};

export default function SupplicationListItem({ text, onPress }: SupplicationListItemProps) {
  const colorScheme = 'dark';

  return (
    <Pressable onPress={onPress} style={styles.container}>
      <Text style={styles.text}>{text}</Text>
      <MaterialCommunityIcons name="chevron-right" size={24} color={Colors[colorScheme].textSecondary} />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 20,
    borderBottomWidth: 1,
    borderBottomColor: Colors.dark.secondary,
  },
  text: {
    fontSize: 16,
    color: Colors.dark.text,
    flex: 1,
  },
});