import BackButton from "@/components/ui/buttons-group/ButtonBack";
import TransactionDetailDisplay from "./components/TransactionDetailDisplay";
import { getTransactionDetailV1 } from "@/services/v1/transactionAdapter";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

interface TransactionDetailModuleProps {
  transactionId: string;
}

export const TransactionDetailModule: React.FC<TransactionDetailModuleProps> = async ({
  transactionId,
}) => {
  let transactionDetail = {} as any;

  try {
    const cookieStore = await cookies();
    const accessToken = cookieStore.get("access_token")?.value;

    if (!accessToken) {
      return redirect("/signin");
    }

    const res = await getTransactionDetailV1(accessToken, transactionId);
    if (res.ok && res.result) {
      transactionDetail = res.result;
    }
  } catch (err: any) {
    console.error("Server Error: Failed to fetch user wallet data:", err);
  }

  return (
    <div className="flex flex-col">
      <BackButton />

      <div className="mx-auto mt-4 w-full min-w-0 max-w-[900px] space-y-6 px-4 sm:px-6">
        <TransactionDetailDisplay transaction={transactionDetail} />
      </div>
    </div>
  );
};