export default function DividerBlock({ block }) {
    const s = block.settings || {};

    const wrapStyle = {
        marginTop: `${s.marginTop || 12}px`,
        marginBottom: `${s.marginBottom || 12}px`,
    };

    const alignMap = {
        left: '0 auto 0 0',
        center: '0 auto',
        right: '0 0 0 auto',
    };

    const hrStyle = {
        border: 'none',
        width: `${s.width || 100}%`,
        margin: alignMap[s.alignment] || '0 auto',
    };

    if (s.style === 'invisible') {
        hrStyle.height = `${s.thickness || 1}px`;
    } else {
        hrStyle.borderTop = `${s.thickness || 1}px ${s.style || 'solid'} ${s.color || '#e0e0e0'}`;
    }

    return (
        <div className="lpcd-block-divider-preview" style={wrapStyle}>
            <hr style={hrStyle} />
        </div>
    );
}
