'use client'

import { motion, AnimatePresence } from 'framer-motion'
import { AlertCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'

interface ToastProps {
  toast: { message: string; type: 'error' | 'success' } | null
  onClose: () => void
}

export function ToastNotification({ toast, onClose }: ToastProps) {
  return (
    <AnimatePresence>
      {toast && (
        <motion.div
          initial={{ opacity: 0, y: 50, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 20, scale: 0.95 }}
          className={`fixed bottom-5 right-5 z-50 flex items-center gap-3 px-4 py-3 rounded-xl border shadow-lg backdrop-blur-md transition-all duration-300 max-w-md ${
            toast.type === 'error'
              ? 'bg-red-500/20 border-red-500/40 text-red-200'
              : 'bg-green-500/20 border-green-500/40 text-green-200'
          }`}
        >
          <AlertCircle className={`w-5 h-5 shrink-0 ${toast.type === 'error' ? 'text-red-400' : 'text-green-400'}`} />
          <p className="text-sm font-medium">{toast.message}</p>
          <Button
            variant="ghost"
            size="icon"
            className="w-5 h-5 ml-auto text-slate-400 hover:text-white"
            onClick={onClose}
          >
            ✕
          </Button>
        </motion.div>
      )}
    </AnimatePresence>
  )
}