// src/components/integrations/molecules/IntegrationCard.tsx
import { PlugZap, ToggleRight } from "lucide-react";
import { Button } from "@contractspec/lib.design-system";
import { jsx, jsxs } from "react/jsx-runtime";
function IntegrationCard({
  id,
  provider,
  name,
  category,
  enabled = true,
  lastSyncAt,
  status = "connected",
  onToggle,
  onConfigure
}) {
  const tone = status === "connected" ? "text-emerald-500 bg-emerald-500/10 border-emerald-500/30" : status === "error" ? "text-red-500 bg-red-500/10 border-red-500/30" : "text-gray-500 bg-gray-500/10 border-gray-500/30";
  return /* @__PURE__ */ jsxs("div", {
    className: "border-border bg-card flex flex-col gap-4 rounded-2xl border p-4 shadow-sm",
    children: [
      /* @__PURE__ */ jsxs("header", {
        className: "flex items-center justify-between",
        children: [
          /* @__PURE__ */ jsxs("div", {
            children: [
              /* @__PURE__ */ jsx("p", {
                className: "text-xl font-semibold",
                children: name
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-sm",
                children: provider
              })
            ]
          }),
          /* @__PURE__ */ jsxs(Button, {
            variant: "outline",
            size: "sm",
            className: `inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold tracking-wide uppercase ${tone}`,
            onPress: () => onToggle?.(id, !enabled),
            children: [
              /* @__PURE__ */ jsx(ToggleRight, {
                className: "h-3.5 w-3.5"
              }),
              enabled ? "Enabled" : "Disabled"
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "text-muted-foreground text-sm",
        children: [
          category && /* @__PURE__ */ jsx("span", {
            className: "font-medium",
            children: category
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "mt-2 flex flex-wrap items-center gap-3 text-xs tracking-wide uppercase",
            children: [
              /* @__PURE__ */ jsxs("span", {
                className: "inline-flex items-center gap-1",
                children: [
                  /* @__PURE__ */ jsx(PlugZap, {
                    className: "h-3 w-3"
                  }),
                  status
                ]
              }),
              /* @__PURE__ */ jsxs("span", {
                children: [
                  "Last sync:",
                  " ",
                  lastSyncAt ? new Date(lastSyncAt).toLocaleString() : "Not synced yet"
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("footer", {
        className: "flex items-center gap-2",
        children: [
          /* @__PURE__ */ jsx(Button, {
            className: "flex-1",
            onPress: () => onConfigure?.(id),
            children: "Configure"
          }),
          /* @__PURE__ */ jsx(Button, {
            variant: "ghost",
            className: "flex-1",
            onPress: () => onToggle?.(id, !enabled),
            children: enabled ? "Disconnect" : "Connect"
          })
        ]
      })
    ]
  });
}
export {
  IntegrationCard
};
