"use client";

import { usePaymentMetrics } from "@/modules/payment/hooks/usePaymentCapabilities";
import { PaymentPageLoader, PaymentPageError } from "@/modules/payment/pages/shared";
import { PageHeader, Card, CardContent } from "@/components/ds";

export const PaymentMetrics = function PaymentMetricsPage() {
  const q = usePaymentMetrics();
  if (q.isLoading) return <PaymentPageLoader />;
  if (q.error) return <PaymentPageError error={q.error} onRetry={() => q.refetch()} />;

  return (
    <div className="space-y-6">
      <PageHeader title="متریک‌ها" description={`${q.data?.service} — فاز ${q.data?.phase}`} />
      <Card>
        <CardContent className="p-4">
          <pre className="overflow-x-auto text-xs">{JSON.stringify(q.data?.metrics ?? {}, null, 2)}</pre>
        </CardContent>
      </Card>
    </div>
  );
};

export default PaymentMetrics;