import { useState, useEffect } from 'react'

type FlashMessageProperties = {
  message: string
  type: 'success' | 'error' | 'info'
}

export default function FlashMessage({
  message,
  type,
}: FlashMessageProperties) {
  const [visible, setVisible] = useState<boolean>(false)

  useEffect(() => {
    if (message) {
      setVisible(true)
      const timer = setTimeout(() => setVisible(false), 3000)
      return () => clearTimeout(timer)
    }
  }, [message])

  if (!visible) return

  const messageStyles = {
    success: 'bg-green-100 text-green-800 border-green-300',
    error: 'bg-red-100 text-red-800 border-red-300',
    info: 'bg-blue-100 text-blue-800 border-blue-300',
  }

  return (
    <div
      className={`fixed top-4 right-4 rounded-lg border p-4 shadow-lg ${messageStyles[type]}`}
    >
      {message}
    </div>
  )
}