import React, { Component } from 'react';
import PropTypes from 'prop-types';

import './ReactFlip.css';

export default class ReactFlip extends Component {
	render() {
		const { front, back } = this.props;
		return (
			<div className={'flip-outer'}>
				<div className={'flip-inner'}>
					<div className={'flip-front'}>
						{front}
					</div>
					<div className={'flip-back'}>
						{back}
					</div>
				</div>
			</div>
		);
	}
}

ReactFlip.propTypes = {
	front: PropTypes.node.isRequired,
	back: PropTypes.node.isRequired
};