import React, { useEffect } from "react";
import { Snackbar, Portal, Checkbox } from "react-native-paper";
import { StyleSheet, Text, View } from "react-native";
import CheckBox from "@/assets/icons/check_circle.svg";
import CrossIcon from "@/assets/icons/cancel.svg";

interface CustomSnackbarProps {
  message: string;
  bgColor: string;
  textColor: string;
  borderColor: string;
  icon: React.ReactNode;
  duration: number;
  visible: boolean;
  onDismiss: () => void;
}

const CustomSnackbar: React.FC<CustomSnackbarProps> = ({
  message,
  bgColor,
  textColor,
  borderColor,
  icon,
  duration,
  visible,
  onDismiss,
}) => {
  useEffect(() => {
    if (visible) {
      const timer = setTimeout(() => {
        onDismiss();
      }, duration * 1000);

      return () => clearTimeout(timer);
    }
  }, [visible, duration, onDismiss]);

  return (
    <Snackbar
      visible={visible}
      onDismiss={onDismiss}
      style={[
        styles.snackbar,
        {
          backgroundColor: bgColor,
          borderColor,
          zIndex: 999,
          elevation: 999,
        },
      ]}
      duration={Snackbar.DURATION_SHORT}
    >
      <View style={styles.content}>
        {icon}
        <Text style={[styles.message, { color: textColor }]}>{message}</Text>
      </View>
    </Snackbar>
  );
};

const styles = StyleSheet.create({
  content: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  message: {
    fontStyle: "normal",
    fontWeight: "bold",
  },
  success: {
    color: "#242C3B",
  },
  error: {
    color: "#D51D10",
  },
  snackbar: {
    borderRadius: 5,
    marginBottom: 60,
    color: "#242C3B",
    borderWidth: 1,
    borderColor: "#B6ECDD",
  },
});

export default CustomSnackbar;