import React from 'react';
import FlipCard from 'react-flip';
import './App.css';

const BackCardContent = () => (
  <div>
    <h2>This is the back card component</h2>
  </div>
);

class App extends React.Component {
  state = {
    flipped: false
  };

  handleCardClick = () => {
    this.setState(prevState => ({
      flipped: !prevState.flipped
    }));
  };

  render() {
    return (
      <div className="App">
        <FlipCard
          cardContainerStyle={{ color: 'white', padding: '10px' }}
          flipped={this.state.flipped}
          onCardClick={this.handleCardClick}
          backContent={<BackCardContent />}
          frontContent="This is the front card"
        />
      </div>
    );
  }
}

export default App;