import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";

export default function save({ attributes }) {
	let { blockTitle, blockSubtitle, hasSubtitle, columnsAmount } = attributes;

	return (
		<section
			{...useBlockProps.save({
				className: `homegrade-blocks-staff-list`,
			})}
		>
			<div
				className={`section_titling section_titling--left section-titling--${
					hasSubtitle ? "has-subtitle" : "has-no-subtitle"
				}`}
			>
				<RichText.Content
					value={blockTitle}
					tagName="h3"
					className="section_titling__title"
				/>
				{hasSubtitle && (
					<RichText.Content
						value={blockSubtitle}
						tagName="h4"
						className="section_titling__subtitle"
					/>
				)}
			</div>

			<ul
				className={`homegrade-blocks-staff-list__staff-list homegrade-blocks-staff-list__staff-list--grid-${columnsAmount}`}
			>
				<InnerBlocks.Content />
			</ul>
		</section>
	);
}
