import { GrunfeldProvider } from "@ilokesto/grunfeld";

function App() {
  return (
    <GrunfeldProvider
      options={{
        defaultPosition: "top-right",
        defaultLightDismiss: true,
        defaultRenderMode: "inline",
        defaultBackdropStyle: {
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          backdropFilter: "blur(5px)",
        },
      }}
    >
      <YourApp />
    </GrunfeldProvider>
  );
}

// This dialog ignores Provider settings and appears in top-right
grunfeld.add(() => ({
  element: <div>Important alert</div>,
  position: "top-right",
  lightDismiss: false,
}));