const containerStyle = (visible) => ({
    visibility: visible ? 'visible' : 'hidden',
    position: 'fixed',
    border: '1px solid red',
    padding: '1rem',
    bottom: '0',
    width: '100%',
    'background-color': 'white',
});
const buttonStyle = {
    border: '1px solid red',
    padding: '1rem',
};
export const PaywallPopoverContent = (props) => {
    return (<div style={containerStyle(props.visible)}>
            <div style={{ display: 'flex', 'flex-direction': 'column', gap: '16px' }}>
                <div>{props.paywallId}</div>
                <div>${props.paywallPrice}</div>

                <div style={{ display: 'flex', gap: '1rem' }}>
                    <button style={buttonStyle} onClick={props.onConfirm}>
                        Confirm
                    </button>

                    <button style={buttonStyle} onClick={props.onCancel}>
                        Cancel
                    </button>
                </div>
            </div>
        </div>);
};