"use client"

import { Toaster } from "sonner"
import { useTheme } from "next-themes"
import type { CSSProperties } from "react"

export function MailToaster() {
  const { resolvedTheme } = useTheme()

  return (
    <Toaster
      position="bottom-right"
      offset={{ right: 16, bottom: 16 }}
      mobileOffset={{ right: 16, left: 16, bottom: 16 }}
      style={
        {
          ["--width"]: "min(420px, calc(100vw - 2.5rem))",
        } as CSSProperties
      }
      theme={resolvedTheme === "dark" ? "dark" : "light"}
      richColors
    />
  )
}