import { useState } from 'react'
import styles from './Notification.module.css'

type Status = 'success' | 'error' | 'info' | 'warning'

interface Props {
  message: string
  status: Status
  onClose: () => void
}

const ICONS: Record<Status, string> = {
  success: '✓',
  error: '✕',
  info: 'i',
  warning: '!',
}

export function Notification({ message, status, onClose }: Props) {
  const [closing, setClosing] = useState(false)

  function handleClose() {
    setClosing(true)
  }

  function handleAnimationEnd() {
    if (closing) onClose()
  }

  return (
    <div
      className={`${styles.notification} ${styles[status]} ${closing ? styles.closing : ''}`}
      onAnimationEnd={handleAnimationEnd}
    >
      <div className={styles.notificationWrapper}>
        <span className={styles.icon}>{ICONS[status]}</span>
        <p className={styles.message}>{message}</p>
      </div>
      <button className={styles.close} onClick={handleClose}>✕</button>
    </div>
  )
}
