'use client';

import { useEffect, useState } from 'react';
import { CheckCircle, AlertCircle, Info, X } from 'lucide-react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

export type NotificationType = 'success' | 'error' | 'info';

const notificationVariants = cva(
  "fixed z-50 top-4 right-4 flex items-center gap-3 p-4 rounded-lg shadow-lg border max-w-sm transition-all duration-300 animate-in fade-in slide-in-from-top-5",
  {
    variants: {
      variant: {
        success: "bg-background border-border text-foreground",
        error: "bg-background border-border text-foreground",
        info: "bg-background border-border text-foreground",
      }
    },
    defaultVariants: {
      variant: "info",
    },
  }
);

interface NotificationProps extends VariantProps<typeof notificationVariants> {
  type: NotificationType;
  message: string;
  duration?: number;
  onClose?: () => void;
}

export function Notification({ 
  type,
  message,
  duration = 5000, // Default duration of 5 seconds
  onClose 
}: NotificationProps) {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    if (duration > 0) {
      const timer = setTimeout(() => {
        setIsVisible(false);
        if (onClose) onClose();
      }, duration);
      
      return () => clearTimeout(timer);
    }
  }, [duration, onClose]);

  const handleClose = () => {
    setIsVisible(false);
    if (onClose) onClose();
  };

  if (!isVisible) return null;

  const getIcon = () => {
    switch (type) {
      case 'success':
        return <CheckCircle className="h-5 w-5 text-primary" />;
      case 'error':
        return <AlertCircle className="h-5 w-5 text-destructive" />;
      case 'info':
        return <Info className="h-5 w-5 text-primary" />;
      default:
        return null;
    }
  };

  return (
    <div className={cn(notificationVariants({ variant: type }))}>
      <div className={cn(
        "flex h-8 w-8 items-center justify-center rounded-full",
        type === 'success' && "bg-primary/10",
        type === 'error' && "bg-destructive/10",
        type === 'info' && "bg-primary/10"
      )}>
        {getIcon()}
      </div>
      <div className="flex-1 text-sm font-medium">{message}</div>
      <button 
        onClick={handleClose} 
        className="rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground focus:outline-none transition-colors"
        aria-label="Close notification"
      >
        <X className="h-4 w-4" />
      </button>
    </div>
  );
}