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

export default function save({ attributes }) {
    const { icon, text, cardBgColor, cardBorderColor, labelColor, textColor, cardStyle, label } = attributes;

    const isFun = cardStyle === 'fun';

    // Conditional Classes
    const wrapperClass = isFun
        ? 'p-6 rounded-lg shadow-md flex items-center space-x-4'
        : 'p-6 rounded flex items-center space-x-6 border transition-colors';

    const iconClass = isFun
        ? 'text-4xl'
        : 'text-3xl text-gray-300 opacity-80';

    const defaultBg = isFun ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.05)';

    const blockProps = useBlockProps.save({
        className: wrapperClass,
        style: {
            backgroundColor: cardBgColor || defaultBg,
            borderColor: cardBorderColor || (!isFun ? 'rgba(255,255,255,0.1)' : undefined)
        }
    });

    return (
        <div {...blockProps}>
            <RichText.Content
                tagName="span"
                className={iconClass}
                value={icon}
            />

            {isFun ? (
                <RichText.Content
                    tagName="span"
                    className="flex-1"
                    value={text}
                    style={{ color: textColor || undefined }}
                />
            ) : (
                <div>
                    <RichText.Content
                        tagName="span"
                        className="block text-xs font-bold uppercase tracking-widest mb-1"
                        value={label}
                        style={{ color: labelColor || '#9ca3af' }}
                    />
                    <RichText.Content
                        tagName="span"
                        className="text-lg font-serif"
                        value={text}
                        style={{ color: textColor || '#ffffff' }}
                    />
                </div>
            )}
        </div>
    );
}
