import { createElement, type CSSProperties, type ElementType, type ReactNode } from "react";
import { cn } from "../../lib/cn";
import {
  Breadcrumbs,
  type BreadcrumbItem,
} from "../navigation/breadcrumbs";

export type PageFrameMaxWidth =
  | "3xl"
  | "4xl"
  | "5xl"
  | "6xl"
  | "full";

export type PageFrameProps = {
  breadcrumbs?: BreadcrumbItem[];
  children?: ReactNode;
  className?: string;
  contentClassName?: string;
  header?: ReactNode;
  headerClassName?: string;
  maxWidth?: PageFrameMaxWidth;
  style?: CSSProperties;
};

const maxWidths: Record<PageFrameMaxWidth, CSSProperties["maxWidth"]> = {
  "3xl": "48rem",
  "4xl": "56rem",
  "5xl": "64rem",
  "6xl": "72rem",
  full: "none",
};

export function PageFrame({
  as,
  breadcrumbs,
  children,
  className,
  contentClassName,
  header,
  headerClassName,
  maxWidth = "5xl",
  style,
}: PageFrameProps & {
  as: ElementType;
}) {
  return createElement(
    as,
    {
      className: cn("mx-auto flex w-full min-w-0 flex-col gap-5", className),
      style: { maxWidth: maxWidths[maxWidth], ...style },
    },
    <>
      {breadcrumbs?.length ? <Breadcrumbs items={breadcrumbs} /> : null}
      {header != null ? (
        <div className={headerClassName}>{header}</div>
      ) : null}
      {children !== undefined ? (
        <div className={cn("flex min-w-0 flex-col gap-5", contentClassName)}>
          {children}
        </div>
      ) : null}
    </>,
  );
}