"use client"

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

interface NotificationProps {
  type: 'success' | 'info' | 'warning' | 'error'
  title: string
  message: string
  isVisible: boolean
  onClose: () => void
  duration?: number
}

export default function Notification({ 
  type, 
  title, 
  message, 
  isVisible, 
  onClose, 
  duration = 5000 
}: NotificationProps) {
  const [isAnimating, setIsAnimating] = useState(false)

  useEffect(() => {
    if (isVisible) {
      setIsAnimating(true)
      const timer = setTimeout(() => {
        onClose()
      }, duration)
      return () => clearTimeout(timer)
    }
  }, [isVisible, duration, onClose])

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

  const getStyles = () => {
    switch (type) {
      case 'success':
        return 'bg-green-600/10 border-green-600/30 text-green-400'
      case 'info':
        return 'bg-blue-600/10 border-blue-600/30 text-blue-400'
      case 'warning':
        return 'bg-yellow-600/10 border-yellow-600/30 text-yellow-400'
      case 'error':
        return 'bg-red-600/10 border-red-600/30 text-red-400'
      default:
        return 'bg-blue-600/10 border-blue-600/30 text-blue-400'
    }
  }

  if (!isVisible) return null

  return (
    <div className="fixed top-6 right-6 z-50 max-w-sm w-full">
      <div 
        className={`${getStyles()} border rounded-2xl p-4 shadow-2xl backdrop-blur-sm transition-all duration-300 ${
          isAnimating ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
        }`}
      >
        <div className="flex items-start space-x-3">
          <div className="flex-shrink-0 mt-0.5">
            {getIcon()}
          </div>
          <div className="flex-1 min-w-0">
            <h4 className="text-sm font-semibold mb-1">{title}</h4>
            <p className="text-sm opacity-90">{message}</p>
          </div>
          <button
            onClick={onClose}
            className="flex-shrink-0 ml-2 p-1 rounded-lg hover:bg-white/10 transition-colors"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
        
        {/* Progress bar */}
        <div className="mt-3 h-1 bg-white/20 rounded-full overflow-hidden">
          <div 
            className="h-full bg-current transition-all duration-300 ease-linear"
            style={{ 
              width: isVisible ? '100%' : '0%',
              transitionDuration: `${duration}ms`
            }}
          />
        </div>
      </div>
    </div>
  )
}