import { Toaster as Sonner, toast } from "sonner";
import { useOptionalTheme } from "../lib/theme";

/** Pre-themed sonner Toaster. Drop <Toaster /> once near your app root. */
export const Toaster = ({ toastOptions, ...props }: React.ComponentProps<typeof Sonner>) => {
  const theme = useOptionalTheme();
  return (
    <Sonner
      theme={theme?.resolvedTheme ?? "system"}
      position="bottom-right"
      toastOptions={{
        ...toastOptions,
        classNames: {
          toast: "!bg-surface !border-border !text-text !rounded-lg !shadow-lg",
          description: "!text-muted",
          actionButton: "!bg-brand !text-brand-foreground",
          cancelButton: "!bg-surface-2 !text-muted",
          ...toastOptions?.classNames,
        },
      }}
      {...props}
    />
  );
};

export { toast };