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

export default function save({ attributes }) {
    const { heading, description, sectionBgColor, curveColor, headingColor, textColor, blockId, socialsStyle, hideCurve, sectionPadding } = attributes;

    const isElegant = socialsStyle === 'elegant';

    // Container Logic
    const bgClass = sectionBgColor ? '' : (isElegant ? 'bg-[#f8fafc]' : 'bg-yellow-sun/20');
    const borderClass = isElegant ? 'border-t border-gray-100' : '';

    // Heading Logic
    const headingBase = isElegant
        ? 'text-3xl md:text-5xl font-serif font-bold text-center mb-6'
        : 'text-4xl md:text-5xl font-black text-center mb-4';
    const headingColorClass = headingColor ? '' : (isElegant ? 'text-slate-800' : 'text-navy');
    const finalHeadingClass = `${headingBase} ${headingColorClass}`;

    // Description Logic
    const descBase = isElegant
        ? 'text-xl max-w-lg mx-auto text-center mb-10 font-light'
        : 'text-xl max-w-lg mx-auto text-center mb-10';
    const descColorClass = textColor ? '' : (isElegant ? 'text-slate-500' : 'text-navy/80');
    const descClass = `${descBase} ${descColorClass}`;

    const containerStyle = {
        backgroundColor: sectionBgColor || undefined,
        paddingTop: sectionPadding ? `${sectionPadding}px` : (isElegant ? '80px' : '96px'),
        paddingBottom: sectionPadding ? `${sectionPadding}px` : (isElegant ? '80px' : '96px'),
    };

    const blockProps = useBlockProps.save({
        className: `alignfull block-${blockId} relative ${bgClass} ${borderClass}`,
        style: containerStyle
    });

    const innerBlocksProps = useInnerBlocksProps.save({
        className: 'flex space-x-8 justify-center flex-wrap gap-y-4'
    });

    return (
        <section {...blockProps}>
            {/* Top SVG Wave */}
            {(!isElegant && !hideCurve) && (
                <div className="absolute top-0 left-0 w-full">
                    <svg viewBox="0 0 1440 100" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" className="w-full h-auto">
                        <path d="M0 0H1440V100C1192.5 50.503 919.5 25.503 720 25.503C520.5 25.503 247.5 50.503 0 100V0Z" fill={curveColor || '#FFFDF5'} />
                    </svg>
                </div>
            )}

            <div className="awt-container mx-auto px-6 relative z-10">
                <RichText.Content
                    tagName="h2"
                    className={finalHeadingClass}
                    value={heading}
                    style={{ color: headingColor || undefined }}
                />

                <RichText.Content
                    tagName="p"
                    className={descClass}
                    value={description}
                    style={{ color: textColor || undefined }}
                />

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