import { useToast } from '../toast'

const ICONS = { info: '💡', ok: '✅', warn: '⚠️' }

export default function Toast(): React.JSX.Element {
  const items = useToast((s) => s.items)
  const remove = useToast((s) => s.remove)

  return (
    <div className="toast-box">
      {items.map((t) => (
        <div key={t.id} className={'toast ' + t.type} onClick={() => remove(t.id)}>
          <span className="t-ic">{ICONS[t.type]}</span>
          <span>{t.msg}</span>
        </div>
      ))}
    </div>
  )
}
