"use client";

import { useQuery } from "@tanstack/react-query";
import { paymentApi } from "@/modules/payment/services/payment-api";
import { PaymentPageLoader, PaymentPageError } from "@/modules/payment/pages/shared";
import { PageHeader, Card, CardContent } from "@/components/ds";

export const PaymentOpenApi = function PaymentOpenApiPage() {
  const q = useQuery({
    queryKey: ["payment", "openapi"],
    queryFn: () => paymentApi.openapi(),
  });

  if (q.isLoading) return <PaymentPageLoader label="در حال بارگذاری OpenAPI…" />;
  if (q.error) return <PaymentPageError error={q.error} onRetry={() => q.refetch()} />;

  return (
    <div className="space-y-6">
      <PageHeader title="OpenAPI" description="openapi.json از سرویس payment:8012" />
      <Card>
        <CardContent className="max-h-[70vh] overflow-auto p-4">
          <pre className="text-xs">{JSON.stringify(q.data, null, 2)}</pre>
        </CardContent>
      </Card>
    </div>
  );
};

export default PaymentOpenApi;