"use client";

import { PageHeader, Card, CardContent, Badge } from "@/components/ds";
import { LoyaltyBreadcrumbs } from "@/modules/loyalty/components/LoyaltyBreadcrumbs";
import { LoyaltyPageLoader, LoyaltyPageError, useLoyaltyHealth } from "@/modules/loyalty/pages/shared";

export default function HealthPage() {
  const q = useLoyaltyHealth();
  if (q.isLoading) return <LoyaltyPageLoader />;
  if (q.error) return <LoyaltyPageError error={q.error} onRetry={() => q.refetch()} />;
  const h = q.data!;
  return (
    <div>
      <LoyaltyBreadcrumbs items={[{ label: "سلامت سرویس" }]} />
      <PageHeader title="سلامت سرویس" description="GET /health از سرویس Loyalty." />
      <Card>
        <CardContent className="flex flex-wrap items-center gap-4 pt-6">
          <Badge tone={h.status === "ok" ? "success" : "danger"}>{h.status}</Badge>
          <span>{h.service}</span>
          <span className="text-[var(--muted)]">v{h.version}</span>
        </CardContent>
      </Card>
    </div>
  );
}