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

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

    const headingClass = headingColor ? 'text-4xl md:text-5xl font-black text-center mb-12' : 'text-4xl md:text-5xl font-black text-navy text-center mb-12';
    const containerClass = sectionBgColor ? 'py-24' : 'py-24';
    const gridClass = `grid grid-cols-2 md:grid-cols-${columns} gap-4 md:gap-6`;

    const blockProps = useBlockProps.save({
        className: `alignfull block-${blockId} ${containerClass}`,
        style: {
            backgroundColor: sectionBgColor || undefined,
        }
    });

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

                {images && images.length > 0 && (
                    <div className={gridClass}>
                        {images.map((image, index) => {
                            const rotationClass = index % 2 === 0 ? 'hover:rotate-2' : 'hover:-rotate-2';
                            return (
                                <div key={image.id || index} className="overflow-hidden rounded-lg shadow-lg">
                                    <img
                                        src={image.url}
                                        alt={image.alt}
                                        className={`w-full h-full aspect-square object-cover transition-all duration-300 hover:shadow-2xl hover:scale-105 ${rotationClass}`}
                                    />
                                </div>
                            );
                        })}
                    </div>
                )}
            </div>
        </section>
    );
}
