import type { ReactNode } from "react";

type AdminAutoLayoutProps = {
  actions?: ReactNode;
  children: ReactNode;
  description?: string;
  error?: string | null;
  errorMessages?: Record<string, string>;
  eyebrow?: string;
  title?: string;
  width?: "default" | "full" | "wide";
};

export function AdminAutoLayout({
  actions,
  children,
  description,
  error,
  errorMessages,
  eyebrow,
  title,
  width = "default"
}: AdminAutoLayoutProps) {
  const errorText =
    error && errorMessages?.[error]
      ? errorMessages[error]
      : error
        ? "Something went wrong. Please check the form and try again."
        : null;

  return (
    <div className={`admin-auto-layout admin-auto-layout--${width}`}>
      {title || eyebrow ? (
        <header className="admin-auto-layout__head section-head admin-dashboard-head">
          <div>
            {eyebrow ? <span className="pill">{eyebrow}</span> : null}
            {title ? <h1 className="admin-title">{title}</h1> : null}
            {description ? <p className="muted">{description}</p> : null}
          </div>
          {actions ? <div className="admin-auto-layout__actions">{actions}</div> : null}
        </header>
      ) : null}
      {errorText ? <p className="admin-error-message">{errorText}</p> : null}
      <div className="admin-auto-layout__body">{children}</div>
    </div>
  );
}