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

// components/ui/section.tsx
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";
var backgroundStyles = {
  white: "bg-background text-foreground",
  gray: "bg-muted/30 text-foreground",
  dark: "bg-foreground text-background",
  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
  primary: "bg-primary text-primary-foreground",
  secondary: "bg-secondary text-secondary-foreground",
  muted: "bg-muted text-muted-foreground"
};
var spacingStyles = {
  none: "py-0 md:py-0",
  sm: "py-12 md:py-16",
  md: "py-16 md:py-24",
  lg: "py-20 md:py-32",
  xl: "py-24 md:py-40"
};
var Section = React.forwardRef(
  ({
    id,
    title,
    subtitle,
    children,
    className,
    style,
    background = "white",
    spacing = "lg",
    ...props
  }, ref) => {
    return /* @__PURE__ */ jsx(
      "section",
      {
        ref,
        id,
        className: cn(
          backgroundStyles[background],
          spacingStyles[spacing],
          className
        ),
        style,
        ...props,
        children: /* @__PURE__ */ jsxs(Container, { children: [
          (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 md:mb-16", children: [
            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-wider mb-2 text-primary", children: subtitle }),
            title && /* @__PURE__ */ jsx("h2", { className: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight", children: title })
          ] }),
          children
        ] })
      }
    );
  }
);
Section.displayName = "Section";

export { Section };
//# sourceMappingURL=section.js.map
//# sourceMappingURL=section.js.map