import './style.scss';

import { Component } from '@wordpress/element';

/**
 * Component Class
 */
export default class ProNote extends Component {
	render() {
		const {
			title,
			children,
			contentBefore = '',
			contentAfter = '',
		} = this.props;

		return (
			<div className="vpf-pro-note-wrapper">
				{contentBefore}
				<div className="vpf-pro-note">
					{title ? <h3>{title}</h3> : ''}
					{children ? <div>{children}</div> : ''}
				</div>
				{contentAfter}
			</div>
		);
	}
}

/**
 * Button Component Class
 */
ProNote.Button = class ProNoteButton extends Component {
	render() {
		const { children } = this.props;

		return (
			<a className="vpf-pro-note-button" {...this.props}>
				{children}
			</a>
		);
	}
};