"use client";

import { useExperienceCapabilities } from "@/modules/experience/hooks/useExperienceCapabilities";
import { ExperiencePageLoader, ExperiencePageError } from "@/modules/experience/pages/shared";
import { PageHeader, Card, CardContent, Badge } from "@/components/ds";
import { ExperienceBreadcrumbs } from "@/modules/experience/components/ExperienceBreadcrumbs";

export const CapabilitiesPage = function ExperienceCapabilitiesPage() {
  const q = useExperienceCapabilities();
  if (q.isLoading) return <ExperiencePageLoader />;
  if (q.error) return <ExperiencePageError error={q.error} onRetry={() => q.refetch()} />;
  const features = q.data?.features ?? {};
  return (
    <div>
      <ExperienceBreadcrumbs 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;