import { View, Text, StyleSheet } from 'react-native';
import { Colors, Spacing } from '../constants/theme';

type AlertItemProps = {
  message: string;
  type?: 'success' | 'warning' | 'danger';
};

export default function AlertItem({
  message,
  type = 'success',
}: AlertItemProps) {

  const theme = Colors.light;

  const getColor = () => {
    switch (type) {
      case 'success':
        return '#22C55E';
      case 'warning':
        return '#FACC15';
      case 'danger':
        return '#EF4444';
      default:
        return theme.textSecondary;
    }
  };

  return (
    <View style={styles.container}>
      <View style={[styles.bar, { backgroundColor: getColor() }]} />
      <Text style={[styles.text, { color: theme.text }]}>
        {message}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: Spacing.three,
    marginHorizontal: Spacing.three,
    marginVertical: Spacing.one,
    borderRadius: 12,
    backgroundColor: '#F0F0F3',
    alignItems: 'center',
  },
  bar: {
    width: 6,
    height: '100%',
    borderRadius: 4,
    marginRight: Spacing.two,
  },
  text: {
    fontSize: 14,
    flex: 1,
  },
});