circle-collect/src/components/CostomAlart.tsx

// src/components/CustomAlert.tsx

import React from "react";
import {
  Modal,
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
} from "react-native";
import { BlurView } from "@react-native-community/blur";
import Ionicons from '@react-native-vector-icons/ionicons';
import colors from "./colors"; // Import centralized colors

interface AlertButton {
  text: string;
  onPress: () => void;
  style?: "cancel" | "destructive" | "default";
}

interface CustomAlertProps {
  visible: boolean;
  title: string;
  message: string;
  buttons: AlertButton[];
  alertType?: 'error' | 'success' | 'info';
}

const CustomAlert: React.FC<CustomAlertProps> = ({
  visible,
  title,
  message,
  buttons,
  alertType = 'info',
}) => {

  const getIcon = () => {
    switch (alertType) {
      case 'error':
        return { name: "close-circle", color: colors.error };
      case 'success':
        return { name: "checkmark-circle", color: colors.success };
      default:
        return { name: "information-circle", color: colors.primary };
    }
  };

  const icon = getIcon();

  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={visible}
      onRequestClose={() => {
        const closeButton = buttons.find(b => b.style === 'cancel') || buttons[0];
        closeButton?.onPress();
      }}
    >
      <View style={styles.centeredView}>
        {Platform.OS === 'ios' ? (
          <BlurView style={styles.absolute} blurType="light" blurAmount={5} />
        ) : (
          <View style={[styles.absolute, { backgroundColor: colors.androidBackdrop }]} />
        )}

        <View style={styles.alertBox}>
          <View style={styles.iconContainer}>
            <Ionicons name={icon.name} size={48} color={icon.color} />
          </View>
          <Text style={styles.alertTitle}>{title}</Text>
          <Text style={styles.alertMessage}>{message}</Text>

          <View style={styles.buttonContainer}>
            {buttons.map((button, index) => (
              <TouchableOpacity
                key={index}
                style={[
                  styles.button,
                  button.style === 'destructive' ? styles.destructiveButton : styles.defaultButton,
                ]}
                onPress={button.onPress}
              >
                <Text style={[
                  styles.buttonText,
                  button.style === 'destructive' ? styles.destructiveButtonText : styles.defaultButtonText
                ]}>
                  {button.text}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  alertBox: {
    backgroundColor: colors.alertBackground,
    borderRadius: 24,
    padding: 24,
    alignItems: "center",
    margin: 24,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.5)',
    shadowColor: colors.black,
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.1,
    shadowRadius: 30,
    elevation: 20,
    width: '90%',
    maxWidth: 400,
  },
  iconContainer: {
    marginBottom: 16,
  },
  alertTitle: {
    fontSize: 22,
    fontWeight: "bold",
    color: colors.textDark,
    marginBottom: 8,
    textAlign: "center",
  },
  alertMessage: {
    fontSize: 16,
    color: colors.textLight,
    textAlign: "center",
    marginBottom: 24,
    lineHeight: 22,
  },
  buttonContainer: {
    flexDirection: "row",
    justifyContent: 'flex-end',
    width: "100%",
    gap: 12,
  },
  button: {
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
  },
  defaultButton: {
    backgroundColor: colors.primary,
  },
  destructiveButton: {
    backgroundColor: colors.error,
  },
  buttonText: {
    fontSize: 16,
    fontWeight: "700",
  },
  defaultButtonText: {
    color: colors.white,
  },
  destructiveButtonText: {
    color: colors.white,
  },
});

export default CustomAlert;