import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { EIconName as o } from "../../../../components/Icon/constants.es.js";
import { cn as t } from "../../../../utils/cn/cn.es.js";
import a from "../../../../modules/FeaturesGallery/components/FeatureGrid/FeatureGrid.module.css";
import { Typography as d } from "../../../../components/Typography/Typography.es.js";
import { IconButton as l } from "../../../../components/IconButton/IconButton.es.js";
const n = {
  primary: { default: "headingXl", mobile: "headingXs" },
  secondary: { default: "headingSm", mobile: "headingXxs" }
}, R = ({ feature: i, className: s, type: m }) => /* @__PURE__ */ r(
  "a",
  {
    className: t(a.root, a[m], s),
    style: { backgroundImage: `url("${i.image}")` },
    href: i.url,
    children: [
      i.hoverTint && /* @__PURE__ */ e("div", { className: a.smoke, "data-smoke": i.hoverTint }),
      /* @__PURE__ */ r("div", { className: a.content, children: [
        /* @__PURE__ */ e(
          d,
          {
            as: "h3",
            defaultVariant: n[m].default,
            mobileVariant: n[m].mobile,
            className: a.label,
            children: i.label
          }
        ),
        /* @__PURE__ */ e("div", { className: a.desktop, children: /* @__PURE__ */ e(
          l,
          {
            iconName: o.ARROW_FORWARD,
            variant: "muted-invert",
            size: m === "primary" ? "lg" : "md"
          }
        ) }),
        /* @__PURE__ */ e("div", { className: a.mobile, children: /* @__PURE__ */ e(l, { iconName: o.ARROW_FORWARD, variant: "muted-invert", size: "sm" }) })
      ] })
    ]
  }
);
export {
  R as FeatureGrid
};
