import type { ReactNode } from "react";

import { FormSection } from "./form-section";

/** Datos generales de una plantilla, con columnas equilibradas y separación entre grupos. */
export function TemplateMetadataSection({
  title,
  primaryFields,
  descriptionField,
  children,
}: {
  title: string;
  primaryFields: ReactNode;
  descriptionField: ReactNode;
  children?: ReactNode;
}) {
  return (
    <div className="pb-4">
      <FormSection title={title} variant="plain">
        <div className="grid items-stretch gap-4 @min-[560px]:grid-cols-2">
          <div className="flex min-w-0 flex-col gap-4">{primaryFields}</div>
          <div className="flex min-w-0 flex-col gap-2">{descriptionField}</div>
        </div>
        {children}
      </FormSection>
    </div>
  );
}