/**
 * Radix Toast viewport — renders snackbar notifications from the toast store.
 */

import * as Toast from "@radix-ui/react-toast";
import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon, InfoCircledIcon } from "@radix-ui/react-icons";

import { useToastStore } from "@/stores/toastStore";

const variantIcons = {
  success: CheckCircledIcon,
  error: ExclamationTriangleIcon,
  info: InfoCircledIcon,
} as const;

export function Toaster() {
  const toasts = useToastStore((state) => state.toasts);
  const dismiss = useToastStore((state) => state.dismiss);

  return (
    <Toast.Provider swipeDirection="right" duration={4500}>
      {toasts.map((toast) => {
        const Icon = variantIcons[toast.variant];

        return (
          <Toast.Root
            key={toast.id}
            className={`oppb-toast oppb-toast--${toast.variant}`}
            open
            onOpenChange={(open) => {
              if (!open) {
                dismiss(toast.id);
              }
            }}
          >
            <div className="oppb-toast__content">
              <Icon className="oppb-toast__icon" aria-hidden="true" />
              <div className="oppb-toast__text">
                <Toast.Title className="oppb-toast__title">{toast.title}</Toast.Title>
                {toast.description ? (
                  <Toast.Description className="oppb-toast__description">{toast.description}</Toast.Description>
                ) : null}
              </div>
            </div>
            <Toast.Close className="oppb-toast__close" aria-label="Dismiss notification">
              <CrossCircledIcon className="oppb-toast__close-icon" />
            </Toast.Close>
          </Toast.Root>
        );
      })}
      <Toast.Viewport className="oppb-toast-viewport" />
    </Toast.Provider>
  );
}

export default Toaster;
