import React from 'react'
import PropTypes from 'prop-types'
import { 
  Button, 
  Card, 
  CardBody, 
  CardHeader,
  CardTitle, 
  CardFooter 
} from 'reactstrap'

function DetailPanel(props) {
  return (
    <Card className="box box-detail">    
      <CardHeader>
        <CardTitle>{props.detailTitle}</CardTitle>
      </CardHeader>  
      <CardBody>
        <p dangerouslySetInnerHTML={{ __html: props.detailContent }} />
      </CardBody>
      <CardFooter>
        <Button onClick={props.onChangeLoginMode}>{props.buttonTextDetailGoback}</Button>
      </CardFooter>
    </Card>
  )
}
export default DetailPanel

DetailPanel.propTypes = {
  detailTitle: PropTypes.string,
  buttonTextDetailGoback: PropTypes.string,
  detailContent: PropTypes.string,
}
DetailPanel.defaultProps = {
  detailTitle: 'Detail',
  buttonTextDetailGoback: 'Go back',
}