"use client";
import { jsx as r, jsxs as a } from "react/jsx-runtime";
import { Wrench as E } from "lucide-react";
import * as t from "react";
import { Button as I } from "../atoms/button.js";
import { Card as P, CardContent as j } from "../atoms/card.js";
import { Checkbox as D } from "../atoms/checkbox.js";
import { Collapsible as T, CollapsibleTrigger as K, CollapsibleContent as S } from "../atoms/collapsible.js";
import { useIsTruncated as z } from "../../../hooks/use-is-truncated.js";
import { cn as d } from "../../../lib/utils.js";
import { createPropsComparator as _ } from "../utils/memo.js";
function R({
  fully_qualified_name: m,
  name: f,
  toolkitName: p,
  description: h,
  Icon: b = (s) => /* @__PURE__ */ r(E, { ...s }),
  isSelected: o = !1,
  onSelect: n,
  hideCheckbox: u = !1,
  ...g
}) {
  const s = t.useCallback(
    () => n?.(!o),
    [o, n]
  ), [l, k] = t.useState(!1), { ref: x, isTruncated: C } = z(!l), v = (e) => {
    const i = e.key === "Enter" || e.code === "Enter", c = e.key === " " || e.key === "Spacebar" || e.code === "Space";
    (i || c) && (e.preventDefault(), s());
  }, y = t.useCallback(
    (e) => n?.(!!e),
    [n]
  ), w = t.useCallback((e) => {
    e.stopPropagation();
  }, []), N = t.useCallback((e) => {
    const i = e.key === "Enter" || e.code === "Enter", c = e.key === " " || e.key === "Spacebar" || e.code === "Space";
    (i || c) && e.stopPropagation();
  }, []);
  return /* @__PURE__ */ r(
    P,
    {
      ...g,
      className: d(
        "group relative cursor-pointer overflow-hidden rounded-lg border py-3 transition-all duration-200",
        "bg-white/50 hover:bg-white/70 dark:bg-neutral-900/50 dark:hover:bg-neutral-900/70",
        "hover:-translate-y-0.5 hover:shadow-lg",
        o && "border-2 border-emerald-600 dark:border-emerald-400",
        !o && "border-neutral-200 hover:border-neutral-300 dark:border-neutral-800 dark:hover:border-neutral-700"
      ),
      onClick: (e) => {
        e.target.closest('[data-slot="checkbox-wrapper"]') || s();
      },
      onKeyDown: v,
      tabIndex: 0,
      children: /* @__PURE__ */ r(j, { className: "px-3", children: /* @__PURE__ */ a(
        "div",
        {
          className: d(
            "grid items-start gap-2",
            "grid-cols-[20px_1fr_auto]",
            u && "grid-cols-[1fr_auto]"
          ),
          children: [
            !u && /* @__PURE__ */ r(
              "div",
              {
                className: "flex items-center justify-center pt-1.5",
                "data-slot": "checkbox-wrapper",
                children: /* @__PURE__ */ r(
                  D,
                  {
                    "aria-label": `Select ${m}`,
                    checked: o,
                    onCheckedChange: y,
                    tabIndex: -1
                  }
                )
              }
            ),
            /* @__PURE__ */ a("div", { className: "min-w-0 space-y-2", children: [
              /* @__PURE__ */ a("div", { className: "flex min-w-0 items-start gap-3", children: [
                /* @__PURE__ */ r("div", { className: "flex size-9 items-center justify-center rounded bg-gradient-to-b from-neutral-200 to-neutral-100 ring-1 ring-black/5 dark:from-neutral-800 dark:to-neutral-900 dark:ring-white/5", children: /* @__PURE__ */ r(b, { className: "size-6 text-neutral-700 dark:text-neutral-200" }) }),
                /* @__PURE__ */ a("div", { className: "flex h-9 min-w-0 flex-col justify-center space-y-0.5", children: [
                  /* @__PURE__ */ r("h3", { className: "truncate font-semibold text-base text-neutral-900 leading-tight dark:text-neutral-100", children: f ?? m }),
                  p && /* @__PURE__ */ r("span", { className: "font-medium text-neutral-500 text-xs leading-tight dark:text-neutral-400", children: p })
                ] })
              ] }),
              h && /* @__PURE__ */ a(T, { onOpenChange: k, open: l, children: [
                /* @__PURE__ */ a("div", { className: "space-y-1", children: [
                  /* @__PURE__ */ r(
                    "p",
                    {
                      className: d(
                        "text-neutral-600 text-sm dark:text-neutral-400",
                        !l && "line-clamp-3"
                      ),
                      ref: x,
                      children: h
                    }
                  ),
                  C && /* @__PURE__ */ r(
                    K,
                    {
                      render: /* @__PURE__ */ r(
                        I,
                        {
                          className: "h-auto px-0",
                          onClick: w,
                          onKeyDown: N,
                          size: "sm",
                          variant: "link"
                        }
                      ),
                      children: /* @__PURE__ */ r("span", { children: l ? "Show less" : "Show more" })
                    }
                  )
                ] }),
                /* @__PURE__ */ r(S, {})
              ] })
            ] }),
            /* @__PURE__ */ r("div", { className: "w-8" })
          ]
        }
      ) })
    }
  );
}
const B = _([
  "fully_qualified_name",
  "name",
  "toolkitName",
  "description",
  "isSelected",
  "Icon",
  "hideCheckbox"
]), L = t.memo(R, B);
export {
  L as ToolCard
};
