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

export default function save({ attributes }) {
    const { heading, sectionBgColor, headingColor, blockId, factsStyle } = attributes;

    const isFun = factsStyle === 'fun' || !factsStyle;

    const containerBaseClass = isFun ? 'bg-coral-pop' : 'text-white';
    const containerClass = sectionBgColor ? `py-24 text-white` : `py-24 ${containerBaseClass} text-white`;

    const headingBaseClass = isFun
        ? 'text-4xl md:text-5xl font-black text-center mb-12'
        : 'text-3xl md:text-4xl font-serif font-bold text-center mb-16';
    const headingClass = headingColor ? headingBaseClass : headingBaseClass;

    const gridClass = isFun
        ? 'grid grid-cols-1 md:grid-cols-2 gap-8 text-xl font-bold'
        : 'grid grid-cols-1 md:grid-cols-2 gap-6';

    const maxWidthClass = isFun ? 'max-w-4xl' : 'max-w-5xl';

    const blockProps = useBlockProps.save({
        className: `block-${blockId} ${containerClass}`,
        style: {
            backgroundColor: sectionBgColor || (isFun ? undefined : '#1e293b'),
        }
    });

    const innerBlocksProps = useInnerBlocksProps.save({
        className: gridClass
    });

    return (
        <section {...blockProps}>
            <div className={`awt-container ${maxWidthClass} mx-auto px-6`}>
                <RichText.Content
                    tagName="h2"
                    className={headingClass}
                    value={heading}
                    style={{ color: headingColor || undefined }}
                />

                <div {...innerBlocksProps} />
            </div>
        </section>
    );
}
