import type { HTMLAttributes, ReactNode } from "react";

export type ContentSectionProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
  as?: "section" | "article";
  children: ReactNode;
  density?: "none" | "compact" | "default";
  layout?: "flow" | "stack";
  spacing?: "none" | "block";
  surface?: "panel" | "subtle";
};

export default function ContentSection({
  as: Component = "section",
  children,
  density = "none",
  layout = "flow",
  spacing = "block",
  surface = "panel",
  className = "",
  ...props
}: ContentSectionProps) {
  return (
    <Component
      {...props}
      className={[
        "content-section",
        `content-section-density-${density}`,
        `content-section-layout-${layout}`,
        `content-section-spacing-${spacing}`,
        `content-section-surface-${surface}`,
        className
      ].filter(Boolean).join(" ")}
    >
      {children}
    </Component>
  );
}