import classNames from 'classnames';
import { Description, Header, Title, TitleExtra, Content } from './Elements';

const SettingsBlock = ( {
	className,
	children,
	title,
	titleSuffix,
	description,
	horizontalLayout = false,
	separatorAndGap = true,
} ) => {
	const blockClassName = classNames( 'ppcp-r-settings-block', className, {
		'ppcp--no-gap': ! separatorAndGap,
		'ppcp--horizontal': horizontalLayout,
	} );

	const BlockTitle = ( { blockTitle, blockSuffix, blockDescription } ) => {
		if ( ! blockTitle && ! blockDescription ) {
			return null;
		}

		return (
			<Header>
				<Title>
					{ blockTitle }
					<TitleExtra>{ blockSuffix }</TitleExtra>
				</Title>
				<Description>{ blockDescription }</Description>
			</Header>
		);
	};

	return (
		<div className={ blockClassName }>
			<BlockTitle
				blockTitle={ title }
				blockSuffix={ titleSuffix }
				blockDescription={ description }
			/>

			<Content asCard={ false }>{ children }</Content>
		</div>
	);
};

export default SettingsBlock;