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

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

/**
 * COMPONENT
 */
function SuccessToast({
  message,
  subline,
  onClose,
}: {
  message: string;
  subline?: string;
  onClose: () => void;
}) {
  return (
    <div className="relative w-[340px] bg-[var(--modal-color)] border border-[#6C47B7]/50 dark:border-[#6C47B7]/70 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-80 hover:opacity-100 transition-opacity"
      >
        <RxCrossCircled size={18} className="text-[#6C47B7]" />
      </button>

      {/* Dynamic items-center (original) vs items-start (two lines) */}
      <div className={`flex gap-3 pr-5 ${subline ? "items-start" : "items-center"}`}>
        
        {/* Icon - margin top only applied when subline exists */}
        <CheckCircle 
          size={22} 
          className={`text-[#6C47B7] 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 */}
          {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 SuccessToast;