"use client";

export type BottomToastNotice = {
  tone: "error" | "success";
  message: string;
};

function CloseToastIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.9"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="h-[16px] w-[16px]"
    >
      <path d="m7 7 10 10" />
      <path d="m17 7-10 10" />
    </svg>
  );
}

export function BottomToast({
  className,
  notice,
  onClose,
}: {
  className?: string;
  notice: BottomToastNotice;
  onClose: () => void;
}) {
  const isError = notice.tone === "error";

  return (
    <div
      className={`pointer-events-none fixed inset-x-0 bottom-4 flex justify-center px-4 sm:bottom-6 ${
        className || "z-[90]"
      }`}
      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
    >
      <div
        role={isError ? "alert" : "status"}
        aria-live={isError ? "assertive" : "polite"}
        className={`pointer-events-auto flex w-full max-w-[560px] items-center gap-3 rounded-[22px] px-4 py-3.5 text-white shadow-[0_20px_48px_rgba(3,7,18,0.34)] ring-1 backdrop-blur-[20px] backdrop-saturate-150 toast-rise ${
          isError
            ? "bg-[rgba(28,17,21,0.92)] ring-[rgba(251,113,133,0.18)]"
            : "bg-[rgba(14,18,26,0.86)] ring-white/10"
        }`}
      >
        <p className="min-w-0 flex-1 text-[14px] font-medium leading-6 tracking-[-0.01em] text-white/96">
          {notice.message}
        </p>
        <button
          type="button"
          aria-label="알림 닫기"
          onClick={onClose}
          className="inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-white/52 transition-colors duration-150 hover:bg-white/8 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/28"
        >
          <CloseToastIcon />
        </button>
      </div>
    </div>
  );
}