import { bd as u, aW as s, b7 as t, e as C, be as N } from "./index-6jcTChn4.js";
const i = N("", {
  // Variants won't have any style by default. Style will only be applied if the variants are combined.
  // So, style is defined in compoundVariants.
  variants: {
    variant: {
      basic: "",
      ProfileCard: "",
      SidebarCard: ""
    },
    structure: {
      image: "",
      card: "",
      title: "",
      description: ""
    }
  },
  compoundVariants: [
    // Style for Basic Variants types
    {
      variant: "basic",
      structure: "image",
      className: "w-10 h-auto"
    },
    {
      variant: "basic",
      structure: "card",
      className: "p-5"
    },
    {
      variant: "basic",
      structure: "title",
      className: "text-base mt-4"
    },
    {
      variant: "basic",
      structure: "description",
      className: "text-sm leading-[18px] text-subtle font-normal"
    },
    // Style for ProfileCard Variant Types
    {
      variant: "ProfileCard",
      structure: "image",
      className: "w-9 h-auto rounded-full mb-4s"
    },
    {
      variant: "ProfileCard",
      structure: "card",
      className: "w-80 p-4 hover:bg-subtle"
    },
    {
      variant: "ProfileCard",
      structure: "title",
      className: "text-base"
    },
    {
      variant: "ProfileCard",
      structure: "description",
      className: "text-sm leading-[18px] text-subtle font-normal"
    },
    // Style for SidebarCard Variant Types
    {
      variant: "SidebarCard",
      structure: "image",
      className: "w-9 h-auto rounded-full mb-4s"
    },
    {
      variant: "SidebarCard",
      structure: "card",
      className: "w-full p-3 border border-subtle"
    },
    {
      variant: "SidebarCard",
      structure: "title",
      className: "text-sm font-cal"
    },
    {
      variant: "SidebarCard",
      structure: "description",
      className: "text-xs text-default line-clamp-2"
    }
  ]
});
function p({
  image: c,
  title: x,
  icon: b,
  description: m,
  variant: r,
  actionButton: e,
  containerProps: d,
  imageProps: a,
  mediaLink: f,
  thumbnailUrl: h,
  learnMore: l
}) {
  const v = l && l.href.startsWith("https") ? "a" : u;
  return /* @__PURE__ */ s.jsxs(
    "div",
    {
      className: t(
        d == null ? void 0 : d.className,
        i({ variant: r, structure: "card" }),
        "bg-default border-subtle text-default flex flex-col justify-between rounded-md border"
      ),
      "data-testid": "card-container",
      ...d,
      children: [
        /* @__PURE__ */ s.jsxs("div", { children: [
          b && b,
          c && /* @__PURE__ */ s.jsx(
            "img",
            {
              src: c,
              alt: a == null ? void 0 : a.alt,
              className: t(
                a == null ? void 0 : a.className,
                i({ variant: r, structure: "image" })
              ),
              ...a
            }
          ),
          /* @__PURE__ */ s.jsx(
            "h5",
            {
              title: x,
              className: t(
                i({ variant: r, structure: "title" }),
                "text-emphasis line-clamp-1 font-bold leading-5"
              ),
              children: x
            }
          ),
          m && /* @__PURE__ */ s.jsx(
            "p",
            {
              title: m.toString(),
              className: t(i({ variant: r, structure: "description" }), "pt-1"),
              children: m
            }
          )
        ] }),
        r === "SidebarCard" && /* @__PURE__ */ s.jsxs(
          "a",
          {
            onClick: e == null ? void 0 : e.onClick,
            target: "_blank",
            rel: "noreferrer",
            href: f,
            "data-testid": e == null ? void 0 : e["data-testid"],
            className: "group relative my-3 flex aspect-video items-center overflow-hidden rounded",
            children: [
              /* @__PURE__ */ s.jsx("div", { className: "absolute inset-0 bg-black bg-opacity-50 transition group-hover:bg-opacity-40" }),
              /* @__PURE__ */ s.jsxs(
                "svg",
                {
                  className: "text-inverted absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg transition-all hover:-mt-px",
                  viewBox: "0 0 32 32",
                  fill: "none",
                  xmlns: "http://www.w3.org/2000/svg",
                  children: [
                    /* @__PURE__ */ s.jsx(
                      "path",
                      {
                        d: "M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z",
                        fill: "white"
                      }
                    ),
                    /* @__PURE__ */ s.jsx(
                      "path",
                      {
                        d: "M12.1667 8.5L23.8334 16L12.1667 23.5V8.5Z",
                        fill: "#111827",
                        stroke: "#111827",
                        strokeWidth: "1.5",
                        strokeLinecap: "round",
                        strokeLinejoin: "round"
                      }
                    )
                  ]
                }
              ),
              /* @__PURE__ */ s.jsx("img", { alt: "play feature video", src: h })
            ]
          }
        ),
        r === "basic" && e && /* @__PURE__ */ s.jsx("div", { children: /* @__PURE__ */ s.jsx(
          C,
          {
            color: "secondary",
            href: e == null ? void 0 : e.href,
            className: "mt-10",
            EndIcon: "arrow-right",
            "data-testid": e["data-testid"],
            children: e == null ? void 0 : e.child
          }
        ) }),
        r === "SidebarCard" && /* @__PURE__ */ s.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
          l && /* @__PURE__ */ s.jsx(
            v,
            {
              href: l.href,
              onClick: e == null ? void 0 : e.onClick,
              target: "_blank",
              rel: "noreferrer",
              className: "text-default text-xs font-medium",
              children: l.text
            }
          ),
          (e == null ? void 0 : e.child) && /* @__PURE__ */ s.jsx(
            "button",
            {
              className: "text-default hover:text-emphasis p-0 text-xs font-normal",
              color: "minimal",
              "data-testid": e == null ? void 0 : e["data-testid"],
              onClick: e == null ? void 0 : e.onClick,
              children: e == null ? void 0 : e.child
            }
          )
        ] })
      ]
    }
  );
}
export {
  p as C
};
