'use client';

import React from 'react';
import { useNotificationStore, Toast } from '@/lib/stores/notificationStore';
import { CheckCircle2, AlertTriangle, AlertCircle, Info, X } from 'lucide-react';
import { cn } from '@/lib/utils';

export function Notification() {
  const { toasts, removeToast } = useNotificationStore();

  if (toasts.length === 0) return null;

  return (
    <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-2 w-full max-w-sm">
      {toasts.map((toast: Toast) => {
        const Icon = {
          success: CheckCircle2,
          warning: AlertTriangle,
          error: AlertCircle,
          info: Info,
        }[toast.type];

        return (
          <div
            key={toast.id}
            className={cn(
              'flex items-start justify-between gap-3 p-4 rounded-2xl border shadow-xl transition-all duration-300 transform translate-y-0 animate-in fade-in slide-in-from-top-4',
              toast.type === 'success' && 'bg-card border-success/20 text-success',
              toast.type === 'warning' && 'bg-card border-warning/20 text-warning',
              toast.type === 'error' && 'bg-card border-danger/20 text-danger',
              toast.type === 'info' && 'bg-card border-accent/20 text-accent'
            )}
          >
            <div className="flex gap-3 items-start">
              <Icon className="h-5 w-5 flex-shrink-0 mt-0.5" />
              <div className="text-sm font-semibold text-text-primary">
                {toast.message}
              </div>
            </div>
            <button
              onClick={() => removeToast(toast.id)}
              className="p-0.5 rounded-lg hover:bg-surface text-text-muted hover:text-text-primary transition-colors flex-shrink-0"
              title="Close toast"
            >
              <X className="h-4 w-4" />
            </button>
          </div>
        );
      })}
    </div>
  );
}