/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { __experimentalHStack as HStack } from '../../../components';
import { forwardRef } from '../../../element';

/**
 * Internal dependencies
 */
import './style.scss';

interface PostPanelRowProps {
	className?: string;
	label?: React.ReactNode;
	children?: React.ReactNode;
}

const PostPanelRow = forwardRef< HTMLDivElement, PostPanelRowProps >(
	( { className, label, children }, ref ) => {
		return (
			<HStack
				className={ clsx( 'editor-post-panel__row', className ) }
				ref={ ref }
			>
				{ label && (
					<div className="editor-post-panel__row-label">
						{ label }
					</div>
				) }
				<div className="editor-post-panel__row-control">
					{ children }
				</div>
			</HStack>
		);
	}
);

export default PostPanelRow;