"use client"

import { useEffect, useState } from "react"
import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  // Evita hydration mismatch - so renderiza apos montar no cliente
  if (!mounted) return null

  const baseClass =
    "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg"
  const baseStyle = {
    background: "#000",
    color: "#fff",
    border: "1px solid #000",
    width: "max-content" as const,
    minWidth: "fit-content" as const,
    maxWidth: "min(24rem, calc(100vw - 2rem))",
    whiteSpace: "normal" as const,
    overflowWrap: "break-word" as const,
  }

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      pauseWhenPageIsHidden={false}
      toastOptions={{
        className: baseClass,
        style: baseStyle,
        classNames: {
          icon: "size-[14px] text-white [&>svg]:size-[14px] [&>svg]:text-white",
          actionButton: "bg-white text-black border border-black rounded-lg",
          cancelButton: "bg-transparent text-white border border-white/40 rounded-lg",
        },
        descriptionClassName: "text-white/80",
      }}
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)",
          "--width": "max-content",
        } as React.CSSProperties
      }
      {...props}
    />
  )
}

export { Toaster }
