import { h } from 'preact'

import { useNotifications } from '../contexts/notifications.tsx'
import Message from './message.tsx'
import s from './notifications.module.scss'

export default function Notifications() {
  const { notifications } = useNotifications()

  return (
    <div className={s.base}>
      {notifications.map(({ id, dismiss, message, type }) => (
        <Message key={id} className={s.notification} type={type} dismiss={dismiss} noMargin>
          {message}
        </Message>
      ))}
    </div>
  )
}