import { toast, ToastList } from 'toastique-toast'

function App() {
  const [toasts, setToasts] = useState([])

  const handleShowToast = () => {
    toast.addToast('success', {
      heading: "Wow",
      content: "I'm an success toast!",
      position: "bottom-left"
    })
    setToasts(toast.getToasts())
  }

  return (
    <div>
      <button type='button' onClick={handleShowToast}>Show</button>
      {toasts.length > 0 && <ToastList toast={toast} toastList={toasts}/>}
    </div>
  );
}

export default App;
  }