"use client";

import { Toaster as HotToaster, type ToasterProps } from "react-hot-toast";

type AppToasterProps = ToasterProps & {
  locale: string;
};

export function Toaster({ locale, ...props }: AppToasterProps) {
  const isArabic = locale === "ar";

  const toastClassName = `${isArabic ? "font-arabic tracking-normal" : "font-latin"} text-[13px] leading-5`;

  return (
    <HotToaster
      key={locale}
      {...props}
      position={props.position ?? (isArabic ? "top-right" : "top-left")}
      reverseOrder={props.reverseOrder ?? false}
      toastOptions={{
        ...props.toastOptions,
        className:
          props.toastOptions?.className ??
          toastClassName,
        style: {
          borderRadius: "36px",
          ...(props.toastOptions?.style ?? {}),
        },
      }}
    />
  );
}