"use client";

import { Toaster } from "react-hot-toast";

export function DynamicToaster() {
  return (
    <Toaster
      position="bottom-right"
      gutter={8}
      containerStyle={{ bottom: "calc(1rem + env(safe-area-inset-bottom, 0px))" }}
      toastOptions={{
        duration: 3200,
        style: {
          background: "var(--toast-bg)",
          color: "var(--toast-color)",
          border: "1px solid var(--toast-border)",
          borderRadius: "14px",
          fontSize: "13.5px",
          fontWeight: 500,
          padding: "10px 14px",
          boxShadow: "var(--toast-shadow)",
          maxWidth: "min(92vw, 420px)",
        },
        success: { iconTheme: { primary: "rgb(16 185 129)", secondary: "#fff" } },
        error: { iconTheme: { primary: "rgb(244 63 94)", secondary: "#fff" } },
      }}
    />
  );
}