"use client";

import { PageHeader, Card, CardContent, Badge } from "@/components/ds";
import { LoyaltyBreadcrumbs } from "@/modules/loyalty/components/LoyaltyBreadcrumbs";

const CAPABILITIES = [
  { id: "programs", phase: "7.0", label: "برنامه‌های وفاداری", shipped: true },
  { id: "tiers", phase: "7.0", label: "سطوح عضویت", shipped: true },
  { id: "members", phase: "7.0–7.1", label: "اعضا و چرخه عمر", shipped: true },
  { id: "points", phase: "7.2", label: "دفترکل امتیاز", shipped: true },
  { id: "rewards", phase: "7.3", label: "پاداش و بازخرید", shipped: true },
  { id: "campaigns", phase: "7.4", label: "کمپین", shipped: true },
  { id: "referrals", phase: "7.5", label: "معرفی", shipped: true },
  { id: "wallets", phase: "7.6", label: "کیف پول", shipped: true },
  { id: "gift_cards", phase: "7.7", label: "کارت هدیه (آینده)", shipped: false },
];

export default function CapabilitiesPage() {
  return (
    <div>
      <LoyaltyBreadcrumbs items={[{ label: "قابلیت‌ها" }]} />
      <PageHeader
        title="قابلیت‌های سرویس"
        description="بر اساس docs/service-snapshots/loyalty.yaml و فازهای ۷.۰–۷.۶."
      />
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {CAPABILITIES.map((c) => (
          <Card key={c.id}>
            <CardContent className="flex items-center justify-between pt-5">
              <span>{c.label}</span>
              <Badge tone={c.shipped ? "success" : "warning"}>{c.phase}</Badge>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}