"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Card, CardContent, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
import { FileText, LayoutGrid, Newspaper, Hash } from "lucide-react";
import { sel } from "@nextsparkjs/core/lib/test";
const entityIcons = {
  pages: FileText,
  posts: Newspaper,
  patterns: LayoutGrid
};
function getEntityIcon(entityType) {
  return entityIcons[entityType] || Hash;
}
function formatEntityType(entityType) {
  return entityType.charAt(0).toUpperCase() + entityType.slice(1);
}
function PatternUsageStats({ counts, total, isLoading }) {
  if (isLoading) {
    return /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", "data-cy": sel("patterns.usageStats.loading"), children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs(Card, { children: [
      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
        /* @__PURE__ */ jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-muted" }),
        /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-pulse rounded bg-muted" })
      ] }),
      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "h-8 w-12 animate-pulse rounded bg-muted" }) })
    ] }, i)) });
  }
  return /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", "data-cy": sel("patterns.usageStats.container"), children: [
    /* @__PURE__ */ jsxs(Card, { "data-cy": sel("patterns.usageStats.total"), children: [
      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
        /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: "Total Uses" }),
        /* @__PURE__ */ jsx(Hash, { className: "h-4 w-4 text-muted-foreground" })
      ] }),
      /* @__PURE__ */ jsxs(CardContent, { children: [
        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: total }),
        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
          "Across ",
          counts.length,
          " entity type",
          counts.length !== 1 ? "s" : ""
        ] })
      ] })
    ] }),
    counts.map((item) => {
      const Icon = getEntityIcon(item.entityType);
      return /* @__PURE__ */ jsxs(Card, { "data-cy": sel("patterns.usageStats.byType", { entityType: item.entityType }), children: [
        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
          /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium", children: formatEntityType(item.entityType) }),
          /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" })
        ] }),
        /* @__PURE__ */ jsxs(CardContent, { children: [
          /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: item.count }),
          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
            (item.count / total * 100).toFixed(1),
            "% of total"
          ] })
        ] })
      ] }, item.entityType);
    })
  ] });
}
export {
  PatternUsageStats
};
