/**
 * 📄 Toast Component
 * 토스트 알림 컴포넌트
 *
 * - 확인/취소 버튼이 있는 토스트 표시 기능
 * - 메시지 표시 토스트 기능
 * - react-hot-toast 라이브러리 기반 구현
 * - 중복 토스트 방지 및 수동 닫기 지원
 * - 커스텀 스타일링 및 애니메이션 적용
 * - 사용자 상호작용을 위한 버튼 이벤트 핸들링
 */
import { Button } from "@common/components/ui";
import toast from "react-hot-toast";

export const confirmToast = (content: string, saveFunc: () => void, contentClass?:string) => {
  toast(
    (t) => (
      <span className="flex flex-col items-center">
        <div className={`mb-6 ${contentClass}`} >{content}</div>
        <div className="flex flex-row space-x-2">
          <Button
            size={"sm"}
            onClick={() => {
              saveFunc();
              toast.dismiss(t.id);
            }}
          >
            확인
          </Button>
          <Button size={"sm"} onClick={() => toast.dismiss(t.id)}>
            취소
          </Button>
        </div>
      </span>
    ),
    {
      id: "global-confirm-toast", // 중복 토스트 방지
      duration: Infinity, // 자동 사라짐 방지
    }
  );
};

export const showConfirmToast = (message: string) => {
  toast.custom(
    (t) => (
      <div
        className={`w-[500px] min-h-[140px] bg-white shadow-lg rounded-xl p-6 border border-gray-200
      ${t.visible ? "animate-enter" : "animate-leave"}`}
      >
        <div className="text-3xl font-extrabold text-red-600 bg-yellow-100 px-4 py-2 rounded-md shadow-md">
          {message}
        </div>{" "}
        <div className="flex justify-end gap-2">
          <Button
            size={"sm"}
            className="px-4 py-1.5 rounded bg-gray-200 text-sm hover:bg-gray-300"
            onClick={() => toast.dismiss(t.id)}
          >
            확인완료
          </Button>
        </div>
      </div>
    ),
    { duration: Infinity }
  ); // 수동 닫기
};