import React from 'react';

/**
 * Reproduces the look of the old WP `__experimentalItemGroup isSeparated isRounded isBordered`:
 * a rounded, bordered container with a divider between each row. Each `renderField(...)` row
 * (`FieldRow` in `utils/renderField.tsx`) already supplies its own `role="listitem"` + padding,
 * so this wrapper only adds the outer frame + between-row separators WP's ItemGroup CSS drew.
 */
export function FieldGroup({ children }: { children: React.ReactNode }) {
    return (
        <div role="list" className="rounded-md border border-gray-200 divide-y divide-gray-200">
            {children}
        </div>
    );
}

/** One repeated "section" pattern from the original layout: a heading, a rule, then content. */
export function Section({ title, children }: { title: string; children: React.ReactNode }) {
    return (
        <div className="mt-8">
            <h5 className="mb-2 text-sm font-semibold text-foreground">{title}</h5>
            <hr className="mb-4 border-gray-200" />
            {children}
        </div>
    );
}