"use client";

import { useTheme } from "@/hooks/useTheme";

/** نمایش وضعیت سلامت backend از طریق API Client. */
export function HealthStatus() {
  const { theme, loading } = useTheme();

  if (loading) return <p className="text-sm text-gray-500">در حال بارگذاری تم...</p>;

  return (
    <div className="rounded-lg border border-gray-200 p-4">
      <h2 className="text-lg font-semibold text-secondary">
        {theme?.site_name ?? "SuperApp"}
      </h2>
      <p className="mt-1 text-sm text-gray-600">
        Frontend جدا از Backend — ارتباط فقط از طریق REST API
      </p>
    </div>
  );
}