/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
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 }) {
    // Destructure the 'sticky' attribute from the block attributes
    const { sticky } = attributes;

    // Block props
    const blockProps = useBlockProps.save();

    // Define a class based on the 'sticky' attribute
    let stickyClass = '';
    if (sticky === 'onScroll') {
        stickyClass = 'lcp-sticky-on-scroll';
    } else if (sticky === 'always') {
        stickyClass = 'lcp-sticky';
    } 
    // Add the dynamic sticky class to the blockProps className
    const className = `${blockProps.className} ${stickyClass}`;

    return (
        <div {...blockProps} className={className} id="lcp-header-container">
            <InnerBlocks.Content />
        </div>
    );
}