import type { CSSProperties, ReactNode } from "react";
import type { PageSection } from "@/admin/types";
import {
  getEditorPreviewClass,
  getSectionLayoutClasses,
  normalizeSectionStyle,
  sectionStyleToCssVars,
  type EditorPreviewBreakpoint,
} from "@/lib/sectionStyle";
import { resolveEffectiveSectionWidth } from "@/lib/sectionWidthForBlock";
import "@/styles/section-page.css";

type PageSectionRendererProps = {
  section: PageSection;
  sectionIndex: number;
  gridTemplateColumns: string;
  children: ReactNode;
  /** Editor-only: simulate tablet/mobile in the page editor. */
  editorPreviewBreakpoint?: EditorPreviewBreakpoint;
  as?: "section" | "div";
  gridClassName?: string;
};

export function PageSectionRenderer({
  section,
  sectionIndex,
  gridTemplateColumns,
  children,
  editorPreviewBreakpoint,
  as = "section",
  gridClassName = "page-sec-grid",
}: PageSectionRendererProps) {
  const style = normalizeSectionStyle(section.style);
  const cssVars = sectionStyleToCssVars(style) as CSSProperties;
  const sectionId = section.id ?? `section-${sectionIndex}`;
  const previewClass = getEditorPreviewClass(editorPreviewBreakpoint);
  const effectiveWidth = resolveEffectiveSectionWidth(section);
  const layoutClasses = getSectionLayoutClasses(effectiveWidth, style);
  const Tag = as;

  return (
    <Tag
      id={sectionId}
      className={`page-sec-styled page-sec-outer ${layoutClasses} ${previewClass}`.trim()}
      style={cssVars}
      data-section-id={sectionId}
    >
      <div className="page-sec-inner">
        <div className={gridClassName} style={{ gridTemplateColumns }}>
          {children}
        </div>
      </div>
    </Tag>
  );
}