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

export default function save({ attributes }) {
    const { imageUrl, title, description, hoverEffect, cardUrl, openInNewTab, cardStyle, iconSvg } = attributes;

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

    // Map hover effect to Tailwind class
    const getHoverClass = () => {
        switch (hoverEffect) {
            case 'rotate-left':
                return 'hover:rotate-[-2deg]';
            case 'rotate-right':
                return 'hover:rotate-[2deg]';
            case 'scale':
            default:
                return 'hover:scale-105';
        }
    };

    // Dynamic Tag Name: <a> if URL provided, <div> otherwise
    const TagName = cardUrl ? 'a' : 'div';

    // Build link props conditionally
    const linkProps = cardUrl ? {
        href: cardUrl,
        target: openInNewTab ? '_blank' : '_self',
        rel: openInNewTab ? 'noopener noreferrer' : undefined
    } : {};

    const blockProps = useBlockProps.save({
        className: isElegant
            ? `block bg-white p-8 rounded-lg shadow-sm border border-gray-100 text-center group hover:shadow-lg transition-all duration-300`
            : `block bg-white p-8 rounded-xl shadow-lg transition-all duration-300 hover:shadow-2xl ${getHoverClass()}`
    });

    // Typography Classes
    const titleClass = isElegant
        ? 'text-xl font-serif font-bold text-brand-dark mb-3'
        : 'text-2xl font-black text-center text-navy mb-2';

    const descClass = isElegant
        ? 'text-brand-gray text-sm leading-relaxed'
        : 'text-center text-navy/70';

    return (
        <TagName {...blockProps} {...linkProps}>
            {isFun && imageUrl && (
                <img src={imageUrl} alt={title} className="mx-auto mb-4" />
            )}

            {isElegant && (
                <div
                    className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-6 text-brand-dark group-hover:bg-brand-dark group-hover:text-white transition-colors"
                    dangerouslySetInnerHTML={{ __html: iconSvg }}
                />
            )}

            <RichText.Content
                tagName="h3"
                className={titleClass}
                value={title}
            />

            <RichText.Content
                tagName="p"
                className={descClass}
                value={description}
            />
        </TagName>
    );
}
