// @bun
// src/presentation/features/molecules/FeatureHoverPreview/FeatureHoverPreview.tsx
import { StatusChip } from "@contractspec/lib.design-system";
import { HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
import {
  ArrowRight,
  Layout,
  Radio,
  Shield,
  Tag,
  Users,
  Zap
} from "lucide-react";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
"use client";
function FeatureHoverPreview({ feature }) {
  const { meta, operations, events, presentations, capabilities } = feature;
  const hasCapabilities = capabilities?.provides?.length || capabilities?.requires?.length;
  return /* @__PURE__ */ jsxs(Fragment, {
    children: [
      meta.description && /* @__PURE__ */ jsx("p", {
        className: "text-muted-foreground text-sm leading-relaxed",
        children: meta.description
      }),
      /* @__PURE__ */ jsxs(HStack, {
        gap: "md",
        className: "py-2",
        children: [
          operations?.length ? /* @__PURE__ */ jsxs("div", {
            className: "flex items-center gap-1.5 text-sm",
            children: [
              /* @__PURE__ */ jsx(Zap, {
                className: "h-4 w-4 text-amber-500"
              }),
              /* @__PURE__ */ jsx("span", {
                className: "font-medium",
                children: operations.length
              }),
              /* @__PURE__ */ jsx("span", {
                className: "text-muted-foreground",
                children: "ops"
              })
            ]
          }) : null,
          events?.length ? /* @__PURE__ */ jsxs("div", {
            className: "flex items-center gap-1.5 text-sm",
            children: [
              /* @__PURE__ */ jsx(Radio, {
                className: "h-4 w-4 text-blue-500"
              }),
              /* @__PURE__ */ jsx("span", {
                className: "font-medium",
                children: events.length
              }),
              /* @__PURE__ */ jsx("span", {
                className: "text-muted-foreground",
                children: "events"
              })
            ]
          }) : null,
          presentations?.length ? /* @__PURE__ */ jsxs("div", {
            className: "flex items-center gap-1.5 text-sm",
            children: [
              /* @__PURE__ */ jsx(Layout, {
                className: "h-4 w-4 text-purple-500"
              }),
              /* @__PURE__ */ jsx("span", {
                className: "font-medium",
                children: presentations.length
              }),
              /* @__PURE__ */ jsx("span", {
                className: "text-muted-foreground",
                children: "views"
              })
            ]
          }) : null
        ]
      }),
      hasCapabilities && /* @__PURE__ */ jsxs("div", {
        className: "border-border/50 space-y-1.5 border-t pt-1",
        children: [
          capabilities?.provides?.length ? /* @__PURE__ */ jsxs(HStack, {
            gap: "xs",
            wrap: "wrap",
            className: "items-start",
            children: [
              /* @__PURE__ */ jsx(Shield, {
                className: "mt-0.5 h-3.5 w-3.5 text-emerald-500"
              }),
              /* @__PURE__ */ jsx("span", {
                className: "text-muted-foreground text-xs",
                children: "Provides:"
              }),
              capabilities.provides.slice(0, 2).map((cap) => /* @__PURE__ */ jsx(StatusChip, {
                tone: "success",
                label: cap.key,
                size: "sm"
              }, cap.key)),
              capabilities.provides.length > 2 && /* @__PURE__ */ jsxs("span", {
                className: "text-muted-foreground text-xs",
                children: [
                  "+",
                  capabilities.provides.length - 2
                ]
              })
            ]
          }) : null,
          capabilities?.requires?.length ? /* @__PURE__ */ jsxs(HStack, {
            gap: "xs",
            wrap: "wrap",
            className: "items-start",
            children: [
              /* @__PURE__ */ jsx(ArrowRight, {
                className: "mt-0.5 h-3.5 w-3.5 text-blue-500"
              }),
              /* @__PURE__ */ jsx("span", {
                className: "text-muted-foreground text-xs",
                children: "Requires:"
              }),
              capabilities.requires.slice(0, 2).map((req) => /* @__PURE__ */ jsx(StatusChip, {
                tone: "info",
                label: req.key,
                size: "sm"
              }, req.key)),
              capabilities.requires.length > 2 && /* @__PURE__ */ jsxs("span", {
                className: "text-muted-foreground text-xs",
                children: [
                  "+",
                  capabilities.requires.length - 2
                ]
              })
            ]
          }) : null
        ]
      }),
      meta.tags?.length ? /* @__PURE__ */ jsxs(HStack, {
        gap: "xs",
        wrap: "wrap",
        className: "border-border/50 items-center border-t pt-1",
        children: [
          /* @__PURE__ */ jsx(Tag, {
            className: "text-muted-foreground h-3.5 w-3.5"
          }),
          meta.tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsxs("span", {
            className: "bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-xs",
            children: [
              "#",
              tag
            ]
          }, tag)),
          meta.tags.length > 4 && /* @__PURE__ */ jsxs("span", {
            className: "text-muted-foreground text-xs",
            children: [
              "+",
              meta.tags.length - 4
            ]
          })
        ]
      }) : null,
      meta.owners?.length ? /* @__PURE__ */ jsxs(HStack, {
        gap: "xs",
        className: "text-muted-foreground items-center text-xs",
        children: [
          /* @__PURE__ */ jsx(Users, {
            className: "h-3.5 w-3.5"
          }),
          /* @__PURE__ */ jsx("span", {
            children: meta.owners.join(", ")
          })
        ]
      }) : null
    ]
  });
}
export {
  FeatureHoverPreview
};
