import React from 'react';
import classNames from 'classnames';
import { ErrorState } from './';
import { LoadingOverlay } from './LoadingOverlay';

/**
 * Reusable wrapper component for inventory field components
 *
 * @param root0
 * @param root0.field          The field to render
 * @param root0.isLoading      Whether the field is loading
 * @param root0.error          Error message if any
 * @param root0.scopeSection   Optional scope section to render
 * @param root0.contentSection Content section to render when not loading or error
 */
export function InventoryFieldWrapper({
	field,
	isLoading,
	error,
	scopeSection,
	contentSection,
}: {
	field: GravityFormsField;
	isLoading: boolean;
	error: string | null;
	scopeSection?: React.ReactNode;
	contentSection: React.ReactNode;
}) {
	const fieldLabel = field.adminLabel || field.label;

	const wrapperClasses = classNames(
		'gpi-results-field',
		'gform-settings-panel',
		{
			'half-opacity': isLoading,
		}
	);

	return (
		<div
			className={wrapperClasses}
			id={`gpi-results-field-${field.id}`}
			{...(isLoading ? { inert: '' } : {})}
		>
			<header className="gform-settings-panel__header">
				<legend className="gform-settings-panel__title">
					{fieldLabel}
				</legend>
			</header>
			<div
				className="gform-settings-panel__content"
				style={{ position: 'relative' }}
			>
				{scopeSection}
				{error ? <ErrorState error={error} /> : contentSection}
				{isLoading && <LoadingOverlay />}
			</div>
		</div>
	);
}