import React, { useEffect } from "react";
import { Snackbar, Portal } from "react-native-paper";
import { StyleSheet, Text } from "react-native";

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

const CustomSnackbar: React.FC<CustomSnackbarProps> = ({
  message,
  bgColor,
  textColor,
  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, zIndex: 999, elevation: 999 },
      ]}
      duration={Snackbar.DURATION_SHORT}
    >
      <Text style={{ color: textColor, ...styles.message }}>{message}</Text>
    </Snackbar>
  );
};

const styles = StyleSheet.create({
  message: {
    fontStyle: "normal",
    fontWeight: "bold",
  },
  success: {
    color: "#242C3B",
  },
  error: {
    color: "#D51D10",
  },
  snackbar: {
    borderRadius: 5,
    marginBottom: 60,
    color: "#242C3B",
  },
});

export default CustomSnackbar;