/**
 * Internal Dependencies
 */
import { clsx } from '@admin/utils';

export function SectionTitle( {
	title,
	description,
	subtitle,
	titleClassName = '',
	descriptionClassName = '',
	subtitleClassName = '',
} ) {
	const titleClasses = clsx(
		'mt-0 mb-2.5 text-4xl font-extralight leading-tight tracking-[-.02em] text-gray-900 text-pretty',
		titleClassName
	);

	const descriptionClasses = clsx(
		'mt-0 mb-10 text-lg font-light leading-relaxed text-gray-500 text-pretty',
		descriptionClassName
	);

	const subtitleClasses = clsx(
		'text-xs uppercase tracking-[.12em] text-gray-400',
		subtitleClassName
	);

	return (
		<>
			{ subtitle && <p className={ subtitleClasses }> { subtitle } </p> }
			{ title && <h2 className={ titleClasses }> { title } </h2> }
			{ description && (
				<p className={ descriptionClasses }> { description } </p>
			) }
		</>
	);
}