import { useBlockProps } from '@wordpress/block-editor';
import { SOCIAL_ICONS } from './icons';

export default function save({ attributes }) {
    const { platform, url, customLabel, socialsStyle, parentIconColor } = attributes;

    const iconData = SOCIAL_ICONS[platform] || SOCIAL_ICONS.instagram;
    const label = customLabel || iconData.label;

    const isElegant = socialsStyle === 'elegant';

    // Define structure classes (layout, size, transition)
    const structureClass = isElegant
        ? 'transition-all duration-300 hover:scale-110 w-10 h-10'
        : 'transition-all duration-300 hover:scale-110 w-12 h-12';

    // Define color classes (text color, hover color)
    const colorClass = isElegant
        ? 'text-slate-500 hover:text-slate-900'
        : 'text-navy/60 hover:text-navy';

    // If custom parentIconColor is set, DO NOT apply the default color classes.
    const finalClassName = parentIconColor
        ? structureClass
        : `${structureClass} ${colorClass}`;

    const blockProps = useBlockProps.save({
        className: finalClassName,
        href: url,
        title: label,
        'aria-label': label,
        target: '_blank',
        rel: 'noopener noreferrer',
        style: {
            color: parentIconColor || undefined
        }
    });

    return (
        <a {...blockProps}>
            <svg className="w-full h-full" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d={iconData.path} />
            </svg>
        </a>
    );
}
