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

export default function save({ attributes }) {
    const {
        postsToShow,
        heading,
        showCurve,
        curveColor,
        sectionBgColor,
        textColor,
        cardBgColor,
        starColor,
        reviewStyle,
    } = attributes;

    const isFun = reviewStyle === 'fun';
    const isElegant = reviewStyle === 'elegant';

    // Styles
    const sectionClass = sectionBgColor ? '' : (isElegant ? 'bg-gray-50' : 'bg-blue-sky/10');
    const sectionStyle = sectionBgColor ? { backgroundColor: sectionBgColor } : {};

    // Heading Styles
    const defaultHeadingClass = isElegant
        ? 'text-3xl md:text-5xl font-serif font-bold text-brand-dark'
        : 'text-4xl md:text-5xl font-black text-navy';
    const textClass = textColor ? '' : 'text-navy';
    const textStyle = textColor ? { color: textColor } : {};

    const blockProps = useBlockProps.save({
        className: `awt-child-author-reviews relative py-24 overflow-hidden ${sectionClass}`,
        style: sectionStyle
    });

    return (
        <div {...blockProps}>
            {showCurve && isFun && (
                <div className="absolute top-0 left-0 w-full pointer-events-none">
                    <svg viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none" style={{ width: '100%', height: '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} />
                    </svg>
                </div>
            )}
            <div className={`awt-container container mx-auto px-6 relative z-10 ${(showCurve && isFun) ? 'mt-12' : ''}`}>
                <RichText.Content
                    tagName="h2"
                    className={`section-heading mb-12 text-center md:text-left ${textClass ? textClass : defaultHeadingClass}`}
                    value={heading}
                    style={textStyle}
                />
                {/* Dynamic Content Provided by Render.php */}
            </div>
        </div>
    );
}
