import React from 'react';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

interface CustomToastContainerProps {
  theme?: 'light' | 'dark' | string;
  newestOnTop?: boolean;
  closeOnClick?: boolean;
}

const CustomToastContainer: React.FC<CustomToastContainerProps> = ({ 
  theme = 'light', 
  newestOnTop = false, 
  closeOnClick = true 
}) => {
  // Map data-theme values to react-toastify theme
  const toastTheme = theme === 'dark' ? 'dark' : 'light';

  return (
    <ToastContainer
      position="top-right"
      autoClose={5000}
      hideProgressBar={false}
      newestOnTop={newestOnTop}
      closeOnClick={closeOnClick}
      rtl={false}
      pauseOnFocusLoss={false}
      draggable
      pauseOnHover
      theme={toastTheme}
    />
  );
};

export default CustomToastContainer;
