export default function LogoBlock({ block }) {
    const s = block.settings || {};
    const style = {
        textAlign: s.alignment || 'center',
        marginBottom: `${s.marginBottom || 20}px`,
    };
    const imgStyle = {
        width: `${s.width || 80}px`,
        height: 'auto',
    };

    const imgUrl = s.source === 'site' ? '' : (s.imageUrl || '');
    const showPlaceholder = !imgUrl;

    return (
        <div className="lpcd-block-logo-preview" style={style}>
            {showPlaceholder ? (
                <div className="lpcd-logo-placeholder" style={{ width: `${s.width || 80}px`, height: `${s.width || 80}px`, margin: s.alignment === 'center' ? '0 auto' : s.alignment === 'right' ? '0 0 0 auto' : '0', background: '#e5e7eb', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span className="dashicons dashicons-format-image" style={{ fontSize: '24px', color: '#9ca3af' }} />
                </div>
            ) : (
                <img src={imgUrl} alt="Logo" style={imgStyle} />
            )}
        </div>
    );
}
