"use client";
'use strict';

var clsx = require('clsx');
var tailwindMerge = require('tailwind-merge');
var img = require('@page-speed/img');
var jsxRuntime = require('react/jsx-runtime');

// lib/utils.ts
function cn(...inputs) {
  return tailwindMerge.twMerge(clsx.clsx(inputs));
}
function MediaHoverCtas(props) {
  const { sectionClassName, gridClassName, items, optixFlowConfig } = props;
  const resolvedItems = items ?? [];
  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", sectionClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: cn(
        "grid min-h-100 grid-cols-1 gap-1 lg:grid-cols-2",
        gridClassName
      ),
      children: resolvedItems.map((item, index) => {
        const CardComponent = item.cardHref ? "a" : "div";
        const hasHoverImage = Boolean(item.onHoverImgSrc);
        const applyHoverBackground = Boolean(
          item.onHoverBackgroundColor && !hasHoverImage
        );
        const cardStyle = item.initialBackgroundColor || applyHoverBackground ? {
          ...item.initialBackgroundColor ? { "--media-hover-cta-bg": item.initialBackgroundColor } : {},
          ...applyHoverBackground ? {
            "--media-hover-cta-hover-bg": item.onHoverBackgroundColor
          } : {}
        } : void 0;
        const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : "bg-muted-foreground/10";
        const hoverBackgroundClassName = applyHoverBackground ? "group-hover:bg-[var(--media-hover-cta-hover-bg)]" : "";
        const hoverImageAltText = item.altText ?? "";
        return /* @__PURE__ */ jsxRuntime.jsxs(
          CardComponent,
          {
            ...item.cardHref ? { href: item.cardHref } : {},
            className: cn(
              "group relative flex min-h-100 cursor-pointer items-center overflow-hidden justify-start p-10 transition-colors duration-500",
              index % 2 === 0 ? "md:justify-center" : "md:justify-start md:pl-24",
              baseBackgroundClassName,
              hoverBackgroundClassName
            ),
            style: cardStyle,
            children: [
              item.onHoverImgSrc ? /* @__PURE__ */ jsxRuntime.jsx(
                img.Img,
                {
                  src: item.onHoverImgSrc,
                  alt: hoverImageAltText,
                  "aria-hidden": item.altText ? void 0 : true,
                  className: cn(
                    "absolute top-0 left-0 z-[-1] h-full w-full object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100",
                    item.imgHoverClassName
                  ),
                  loading: "lazy",
                  optixFlowConfig
                }
              ) : null,
              item.content
            ]
          },
          index
        );
      })
    }
  ) });
}

exports.MediaHoverCtas = MediaHoverCtas;
//# sourceMappingURL=media-hover-ctas.cjs.map
//# sourceMappingURL=media-hover-ctas.cjs.map