import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { Skeleton as d } from "../atoms/skeleton.js";
import { cn as l } from "../../../lib/utils.js";
function u({
  className: r,
  icon: s,
  title: a,
  subtitle: o,
  style: n,
  ...i
}) {
  return /* @__PURE__ */ t(
    "button",
    {
      className: l(
        "flex w-full cursor-pointer flex-col gap-1.5 rounded-2xl border bg-card text-left shadow-xs transition-all hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
        r
      ),
      "data-slot": "suggestion-card",
      style: {
        padding: "clamp(0.75rem, 1.6vh, 1rem)",
        ...n
      },
      type: "button",
      ...i,
      children: [
        /* @__PURE__ */ e(
          "div",
          {
            className: "flex items-center justify-center rounded-xl border bg-muted shadow-xs",
            "data-slot": "suggestion-card-icon",
            style: {
              width: "clamp(2rem, 2.8vh, 2.5rem)",
              height: "clamp(2rem, 2.8vh, 2.5rem)"
            },
            children: s
          }
        ),
        /* @__PURE__ */ t(
          "div",
          {
            className: "space-y-1.5",
            style: { paddingTop: "clamp(0.25rem, 0.8vh, 0.5rem)" },
            children: [
              /* @__PURE__ */ e(
                "h3",
                {
                  className: "font-semibold text-card-foreground text-sm leading-tight",
                  "data-slot": "suggestion-card-title",
                  children: a
                }
              ),
              /* @__PURE__ */ e(
                "p",
                {
                  className: "text-muted-foreground text-xs leading-snug",
                  "data-slot": "suggestion-card-subtitle",
                  children: o
                }
              )
            ]
          }
        )
      ]
    }
  );
}
function h({
  className: r,
  style: s,
  ...a
}) {
  return /* @__PURE__ */ t(
    "div",
    {
      "aria-hidden": "true",
      className: l(
        "flex w-full flex-col gap-1.5 rounded-2xl border bg-card shadow-xs",
        r
      ),
      "data-slot": "suggestion-card-skeleton",
      style: {
        padding: "clamp(0.75rem, 1.6vh, 1rem)",
        ...s
      },
      ...a,
      children: [
        /* @__PURE__ */ e(
          d,
          {
            className: "rounded-xl",
            style: {
              width: "clamp(2rem, 2.8vh, 2.5rem)",
              height: "clamp(2rem, 2.8vh, 2.5rem)"
            }
          }
        ),
        /* @__PURE__ */ t(
          "div",
          {
            className: "space-y-1.5",
            style: { paddingTop: "clamp(0.25rem, 0.8vh, 0.5rem)" },
            children: [
              /* @__PURE__ */ e(d, { className: "h-4 w-3/4 rounded" }),
              /* @__PURE__ */ e(d, { className: "h-3 w-1/2 rounded" })
            ]
          }
        )
      ]
    }
  );
}
export {
  u as SuggestionCard,
  h as SuggestionCardSkeleton
};
