'use client';
import { useEffect, useState } from 'react';
interface NotificationProps {
message: string;
type: 'success' | 'error' | 'info';
onClose: () => void;
}
export default function Notification({ message, type, onClose }: NotificationProps) {
const [isVisible, setIsVisible] = useState(true);
useEffect(() => {
const timer = setTimeout(() => {
setIsVisible(false);
setTimeout(onClose, 300); // Wait for fade out animation
}, 3000);
return () => clearTimeout(timer);
}, [onClose]);
const bgColor = type === 'success'
? 'bg-green-500/20 border-green-500/50'
: type === 'error'
? 'bg-red-500/20 border-red-500/50'
: 'bg-cyan-500/20 border-cyan-500/50';
const textColor = type === 'success'
? 'text-green-400'
: type === 'error'
? 'text-red-400'
: 'text-cyan-400';
const icon = type === 'success' ? (
) : type === 'error' ? (
) : (
);
return (
{icon}
);
}