import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import React from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';

// lib/utils.ts
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var maxWidthStyles = {
  sm: "max-w-screen-sm",
  md: "max-w-screen-md",
  lg: "max-w-screen-lg",
  xl: "max-w-7xl",
  "2xl": "max-w-screen-2xl",
  "4xl": "max-w-[1536px]",
  full: "max-w-full"
};
var Container = React.forwardRef(
  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
    const Component = as;
    return /* @__PURE__ */ jsx(
      Component,
      {
        ref,
        className: cn(
          "mx-auto w-full px-2 sm:px-4 lg:px-8",
          maxWidthStyles[maxWidth],
          className
        ),
        ...props,
        children
      }
    );
  }
);
Container.displayName = "Container";
function PageHeroBanner({
  imageUrl,
  videoUrl,
  alt = "Hero banner",
  children,
  className = "",
  loading = "eager",
  minHeight = "500px",
  showOverlay = true,
  overlayOpacity = 0.6,
  contentMaxWidth = "4xl",
  overlayClassName,
  contentClassName,
  style,
  ...props
}) {
  if (!imageUrl && !videoUrl) {
    throw new Error("PageHeroBanner requires either imageUrl or videoUrl");
  }
  if (imageUrl && videoUrl) {
    throw new Error(
      "PageHeroBanner cannot have both imageUrl and videoUrl. Please provide only one."
    );
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn("relative w-full overflow-hidden", className),
      style: {
        minHeight,
        ...style
      },
      ...props,
      children: [
        imageUrl && /* @__PURE__ */ jsx(
          "img",
          {
            src: imageUrl,
            alt,
            loading,
            className: "absolute inset-0 w-full h-full object-cover"
          }
        ),
        videoUrl && /* @__PURE__ */ jsx(
          "video",
          {
            src: videoUrl,
            className: "absolute inset-0 w-full h-full object-cover",
            autoPlay: true,
            loop: true,
            muted: true,
            playsInline: true,
            preload: "auto"
          }
        ),
        showOverlay && /* @__PURE__ */ jsx(
          "div",
          {
            className: cn(
              "absolute inset-0 bg-linear-to-b from-black via-black to-black",
              overlayClassName
            ),
            style: { opacity: overlayOpacity }
          }
        ),
        /* @__PURE__ */ jsx(
          Container,
          {
            maxWidth: contentMaxWidth,
            className: cn("relative h-full flex items-center", contentClassName),
            style: { minHeight },
            children: /* @__PURE__ */ jsx("div", { className: "relative text-background drop-shadow-lg py-16 md:py-24", children })
          }
        )
      ]
    }
  );
}

export { PageHeroBanner };
