import { clsx } from '@admin/utils';

export function SettingBlock( {
	label,
	description,
	note,
	children,
	disabled,
} ) {
	return (
		<div
			className={ clsx(
				'border-b border-border px-6 py-5 last:border-0',
				disabled && 'opacity-50'
			) }
		>
			{ label && (
				<div className="text-sm font-medium text-gray-900">
					{ label }
				</div>
			) }
			{ description && (
				<div className="mt-1 mb-4 text-sm text-gray-500">
					{ description }
					{ note }
				</div>
			) }
			<div className={ clsx( ! description && 'mt-1' ) }>
				{ children }
			</div>
		</div>
	);
}