import type { ReactNode } from "react";

type AdminFormFieldProps = {
  children: ReactNode;
  hint?: string;
  label: string;
  span?: "default" | "full";
};

export function AdminFormField({ children, hint, label, span = "default" }: AdminFormFieldProps) {
  return (
    <label className={`admin-form-field field${span === "full" ? " admin-form-field--full" : ""}`}>
      <span className="admin-form-field__label">{label}</span>
      {children}
      {hint ? <span className="admin-form-field__hint admin-field-hint">{hint}</span> : null}
    </label>
  );
}

export function AdminFormSection({ title }: { title: string }) {
  return (
    <div className="admin-form-section panel-header" role="presentation">
      {title}
    </div>
  );
}