// Simple toast container
import { useToast } from "@/hooks/use-toast";
import { Toast } from "./toast";
import { createPortal } from "react-dom";

export function Toaster() {
  const { toasts, dismiss } = useToast();

  if (!toasts.length) return null;

  // Create a portal to render toasts at the root level
  return createPortal(
    <div className="fixed bottom-0 right-0 z-50 p-4 flex flex-col gap-2">
      {toasts.map((toast) => (
        <Toast
          key={toast.id}
          id={toast.id!}
          title={toast.title}
          description={toast.description}
          variant={toast.variant}
          onDismiss={dismiss}
        />
      ))}
    </div>,
    document.body
  );
}