import React, { useState } from 'react'
import { Button, ToasterContainer, Toaster, ToasterType } from 'react-icecream'

export default function Demo() {
  const [toasts, setToasts] = useState<Array<{ type: ToasterType, message: string }>>([])
  function handleClick() {
    const types: ToasterType[] = ['info', 'success', 'warning', 'error']
    const newToasts = [...toasts]
    newToasts.push({ type: types[Math.ceil(Math.random() * 4)], message: '新消息来咯，类型随机。' })
    setToasts(newToasts)
  }
  return (
    <div>
      <Button onClick={handleClick}>点击添加一条消息</Button>
      <div style={{ position: 'relative', height: '200px', overflow: 'auto', border: '1px solid #efefef' }}>
        toaster 生成区域
        <ToasterContainer>
          {toasts.map((toast, index) => <Toaster key={index} {...toast} />)}
        </ToasterContainer>
      </div>
    </div>
  )
}