"use client";

import { useDeliveryCapabilities } from "@/modules/delivery/hooks/useDeliveryCapabilities";
import { DeliveryPageLoader, DeliveryPageError } from "@/modules/delivery/pages/shared";
import { PageHeader, Card, CardContent, Badge } from "@/components/ds";
import { DeliveryBreadcrumbs } from "@/modules/delivery/components/DeliveryBreadcrumbs";

export const CapabilitiesPage = function DeliveryCapabilitiesPage() {
  const q = useDeliveryCapabilities();
  if (q.isLoading) return <DeliveryPageLoader />;
  if (q.error) return <DeliveryPageError error={q.error} onRetry={() => q.refetch()} />;
  const features = q.data?.features ?? {};
  return (
    <div>
      <DeliveryBreadcrumbs current="قابلیت‌ها" />
      <PageHeader title="قابلیت‌ها" description={`فاز ${q.data?.phase} — ${q.data?.commercial_product}`} />
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {Object.entries(features).map(([k, v]) => (
          <Card key={k}><CardContent className="flex items-center justify-between p-3">
            <span className="text-sm font-mono">{k}</span>
            <Badge tone={v ? "success" : "default"}>{v ? "فعال" : "غیرفعال"}</Badge>
          </CardContent></Card>
        ))}
      </div>
    </div>
  );
};
export default CapabilitiesPage;