import {
  NonIdealState,
  NonIdealStateIconSize,
  Section,
} from '@blueprintjs/core'
import { css } from '@emotion/css'
import Notification from './components/Notification'
import { useNotificationStorage } from './var/notifications'

const notifications = css`
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  overflow: auto;
`

const ErrorLog = () => {
  const value = useNotificationStorage()

  return (
    <Section title='Errors'>
      <div className={notifications}>
        {value && value.length > 0 ? (
          value.map(notification => (
            <Notification key={notification.timestamp} {...notification} />
          ))
        ) : (
          <NonIdealState
            iconSize={NonIdealStateIconSize.SMALL}
            layout='horizontal'
            icon='thumbs-up'
            title='No errors'
            description='There are no errors logged to display'
          />
        )}
      </div>
    </Section>
  )
}

export default ErrorLog
