import { useEffect } from "react";
import { Toaster as SonnerToaster } from "sonner";
import { toastState } from "./state";
import type { ToastPosition } from "./types";

export interface ToasterProps {
  /** Position of the toast container */
  position?: ToastPosition;
  /** Whether to show the close (X) button on toasts */
  closeButton?: boolean;
  /** Whether toasts expand on hover */
  expand?: boolean;
  /** Duration in milliseconds before auto-dismiss (default: 4000) */
  duration?: number;
  /** Maximum number of visible toasts */
  visibleToasts?: number;
  /** Gap between toasts in pixels */
  gap?: number;
}

export const Toaster = ({
  position = "top-right",
  closeButton = true,
  expand = false,
  duration = 4000,
  visibleToasts = 3,
  gap = 8,
}: ToasterProps) => {
  // Sync shared state with Toaster's closeButton prop
  useEffect(() => {
    toastState.showCloseButton = closeButton;
  }, [closeButton]);

  return (
    <SonnerToaster
      position={position}
      closeButton={false}
      expand={expand}
      duration={duration}
      visibleToasts={visibleToasts}
      gap={gap}
    />
  );
};

Toaster.displayName = "Toaster";
