"use client"

import { CheckCircle, AlertCircle, Info, X } from "lucide-react"
import { useState, useEffect } from "react"

type AlertType = "success" | "error" | "info"

interface AlertMessageProps {
  type: AlertType
  message: string
  isVisible: boolean
  onClose: () => void
  autoClose?: boolean
  duration?: number
}

export default function AlertMessage({
  type,
  message,
  isVisible,
  onClose,
  autoClose = true,
  duration = 5000,
}: AlertMessageProps) {
  const [isClosing, setIsClosing] = useState(false)

  useEffect(() => {
    if (autoClose && isVisible) {
      const timer = setTimeout(() => {
        setIsClosing(true)
        setTimeout(() => {
          onClose()
          setIsClosing(false)
        }, 300)
      }, duration)

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

  if (!isVisible) return null

  const getAlertStyles = () => {
    switch (type) {
      case "success":
        return "bg-green-50 border-green-500 text-green-700"
      case "error":
        return "bg-red-50 border-red-500 text-red-700"
      case "info":
      default:
        return "bg-blue-50 border-blue-500 text-blue-700"
    }
  }

  const getIcon = () => {
    switch (type) {
      case "success":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case "error":
        return <AlertCircle className="h-5 w-5 text-red-500" />
      case "info":
      default:
        return <Info className="h-5 w-5 text-blue-500" />
    }
  }

  return (
    <div
      className={`fixed top-4 left-1/2 transform -translate-x-1/2 z-50 transition-all duration-300 ${
        isClosing ? "opacity-0 translate-y-[-20px]" : "opacity-100 translate-y-0"
      }`}
    >
      <div className={`max-w-md w-full rounded-lg shadow-md border-l-4 p-4 ${getAlertStyles()}`}>
        <div className="flex items-start">
          <div className="flex-shrink-0">{getIcon()}</div>
          <div className="ml-3 flex-1">
            <p className="text-sm font-medium">{message}</p>
          </div>
          <button
            onClick={() => {
              setIsClosing(true)
              setTimeout(() => {
                onClose()
                setIsClosing(false)
              }, 300)
            }}
            className="ml-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
      </div>
    </div>
  )
}