"use client";

import { useState } from "react";

interface RawCallbackViewerProps {
  payload: unknown;
}

export function RawCallbackViewer({ payload }: RawCallbackViewerProps) {
  const [open, setOpen] = useState(false);

  if (payload == null) {
    return (
      <p className="text-[11px] italic text-neutral-400">
        Belum ada callback dari gateway.
      </p>
    );
  }

  return (
    <div>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="text-[11px] font-semibold text-secondary-700 hover:text-secondary-900"
      >
        {open ? "▼ Sembunyikan raw callback" : "▶ Lihat raw callback JSON"}
      </button>
      {open && (
        <pre className="mt-2 max-h-96 overflow-auto rounded-lg border border-neutral-200 bg-neutral-50 p-3 text-[11px] leading-relaxed text-neutral-700">
          {JSON.stringify(payload, null, 2)}
        </pre>
      )}
    </div>
  );
}