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

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {Element} Element to render.
 */
export default function Save({ attributes }) {
    const { hasSidecontent, headerContainerStickyType } = attributes; // Retrieve the attributes
    const blockProps = useBlockProps.save();

    // Conditionally add classes based on attributes
    let classNames = '';
    
    // Add 'has-sidecontent' class if attribute is true
    if (hasSidecontent) {
        classNames += 'lcp-has-sidecontent ';
    }

    // Conditionally add sticky header classes based on the headerContainerStickyStyle value
    if (headerContainerStickyType === 'always') {
        classNames += 'lcp-has-sticky-header ';
    } else if (headerContainerStickyType === 'onScroll') {
        classNames += 'lcp-has-sticky-on-scroll-header ';
    }

    return (
        <div className={classNames} id="lcp-viewport-outer">
            <div id="lcp-viewport-inner" className={classNames}>
                <InnerBlocks.Content />
            </div>
        </div>
    );
}
