import React, { useState, useEffect } from 'react';
import { usePage } from '@inertiajs/inertia-react';
import { toast, ToastContainer } from 'react-toastify';
import "react-toastify/dist/ReactToastify.css";

toast.configure()

const FlashMessage = () => {
  const { flash, errors } = usePage().props;

  useEffect(()=>{
    if(flash.success){
      toast.success(flash.success)
      flash.success = null
    }
    if(flash.error){
      toast.error(flash.error)
      flash.error = null
    }
  },[flash])

  return (
  <div>
    {
    <ToastContainer
    position="top-right"
    autoClose="5000"
    hideProgressBar={false}
    closeOnClick={true}
    pauseOnHover={true}
    draggable={true}
    theme="light"
    >
      
    </ToastContainer> 
    }
  </div>
  )
}

export default FlashMessage