import React, { useEffect, useState } from 'react'
import './Toast.css'

function Toast({ message, onClose, duration = 3000, type = 'success' }) {
  const [isVisible, setIsVisible] = useState(true)

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsVisible(false)
      setTimeout(() => {
        onClose?.()
      }, 300) // Ждем завершения анимации
    }, duration)

    return () => clearTimeout(timer)
  }, [duration, onClose])

  if (!isVisible) return null

  return (
    <div className={`toast toast-${type} ${isVisible ? 'toast-visible' : ''}`}>
      <div className="toast-content">
        <span className="toast-message">{message}</span>
      </div>
    </div>
  )
}

export default Toast