"use client";
import { toast } from "react-hot-toast";
import { RxCrossCircled } from "react-icons/rx";
import { AlertCircle } from "lucide-react";
import TextTranslate from "../../utils/TextTranslate";

/**
 * SHOW ERROR TOAST
 */
export const showErrorToast = (message: string, subline?: string) => {
  toast.custom(
    (t) => (
      <ErrorToast
        message={message}
        subline={subline}
        onClose={() => toast.dismiss(t.id)}
      />
    ),
    {
      duration: 2200,
      position: "top-right",
    }
  );
};

/**
 * COMPONENT
 */
function ErrorToast({
  message,
  subline,
  onClose,
}: {
  message: string;
  subline?: string;
  onClose: () => void;
}) {
  return (
    <div className="relative w-[340px] bg-[var(--modal-color)] border border-red-500/30 text-[var(--text-primary)] rounded-xl px-4 py-4 shadow-2xl animate-in slide-in-from-right-5 fade-in duration-300">
      
      {/* Close */}
      <button
        onClick={onClose}
        className="absolute top-2 right-2 opacity-60 hover:opacity-100 transition-opacity"
      >
        <RxCrossCircled size={18} className="text-red-500" />
      </button>

      {/* Dynamic alignment: center for 1 line, start for 2 lines */}
      <div className={`flex gap-3 pr-5 ${subline ? "items-start" : "items-center"}`}>
        
        {/* Icon margin only applied when subline exists */}
        <AlertCircle 
          size={22} 
          className={`text-red-500 shrink-0 ${subline ? "mt-1" : ""}`} 
        />
        
        <div className="flex flex-col">
          {/* MAIN LINE */}
          <p className="text-[14px] font-gilroy_md font-medium leading-[18px] line-clamp-1">
            <TextTranslate text={message} />
          </p>

          {/* SUBLINE (Optional) */}
          {subline && (
            <p className="text-[12px] text-[var(--text-secondary)] font-gilroy_md leading-[16px] line-clamp-2 font-medium">
              <TextTranslate text={subline} />
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

export default ErrorToast;