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

export function SettingHeader( {
	label,
	description,
	note,
	descriptionClassName,
} ) {
	return (
		<>
			{ label && (
				<div className="text-sm font-medium text-gray-900">
					{ label }
				</div>
			) }
			{ description && (
				<div
					className={ clsx(
						'mt-1 text-sm text-gray-500',
						descriptionClassName
					) }
				>
					{ description }
					{ note }
				</div>
			) }
		</>
	);
}