"use client";

import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Toaster as Sonner, type ToasterProps } from "sonner";

export function Toaster(props: ToasterProps) {
  const pathname = usePathname();
  const { resolvedTheme = "light" } = useTheme();
  const [documentLang, setDocumentLang] = useState("de");

  useEffect(() => {
    setDocumentLang(document.documentElement.lang || "de");
  }, [pathname]);

  const isArabic = documentLang === "ar";
  const toastFontFamily = isArabic ? "var(--font-dubai), sans-serif" : "var(--font-museo), sans-serif";

  return (
    <Sonner
      theme={resolvedTheme as ToasterProps["theme"]}
      position="top-center"
      duration={1800}
      toastOptions={{
        style: {
          borderRadius: "16px",
          padding: "10px 12px",
          minWidth: "0",
          maxWidth: "min(calc(100vw - 2rem), 32rem)",
          background: "hsl(var(--card))",
          color: "hsl(var(--card-foreground))",
          border: "1px solid hsl(var(--border))",
          fontFamily: toastFontFamily,
        },
        classNames: {
          toast:
            "min-w-0 max-w-[min(calc(100vw-2rem),32rem)] rounded-[16px] border border-border bg-card px-3 py-2 text-card-foreground shadow-panel",
          default:
            "border-border bg-card text-card-foreground",
          title: "text-[13px] font-medium leading-5",
          description: "text-[13px] leading-5 text-muted-foreground",
          success:
            "border-status-success/30 bg-status-success-soft text-status-success dark:border-status-success/40 dark:bg-status-success-soft dark:text-status-success",
          error:
            "border-destructive/30 bg-destructive/10 text-destructive dark:border-destructive/40 dark:bg-destructive/20 dark:text-destructive-foreground",
        },
      }}
      {...props}
    />
  );
}