import React from 'react';
import PropTypes from 'prop-types'
import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
import { BlankTemplate } from '../../templates'

const PageContent = ({ ...props }) => (
  <Container>
    <Row className="justify-content-center">
      <Col md="6">
        <div className="clearfix">
          <h1 className="float-left display-3 mr-4">{props.errorNumber}</h1>
          <h4 className="pt-3">{props.title}</h4>
          <p className="text-muted float-left">{props.desc}</p>
        </div>
        {
          props.showSearchPage && (
            <InputGroup className="input-prepend">
              <InputGroupAddon addonType="prepend">
                <InputGroupText>
                  <i className="fa fa-search"></i>
                </InputGroupText>
              </InputGroupAddon>
              <Input size="16" type="text" placeholder={props.placeholderSearch} />
              <InputGroupAddon addonType="append">
                <Button color="info">{props.textButtonSearch}</Button>
              </InputGroupAddon>
            </InputGroup>
          )
        }
      </Col>
    </Row>
  </Container>
)

const ErrorPage = ({ ...props }) => (

  props.includeTemplate ? (
    <BlankTemplate>
      <PageContent {...props} />
    </BlankTemplate>
  ) : <PageContent {...props} />
)
export default ErrorPage;

ErrorPage.propTypes = {
  errorNumber: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  desc: PropTypes.string,
  showSearchPage: PropTypes.bool,
  onCallbackSearch: PropTypes.func,
  placeholderSearch: PropTypes.string,
  textButtonSearch: PropTypes.string,
  iconTypeName: PropTypes.string,
  iconName: PropTypes.string,
  includeTemplate: PropTypes.bool
}
ErrorPage.defaultProps = {
  showSearchPage: false,
  placeholderSearch: 'What are you looking for?',
  textButtonSearch: 'Search',
  iconTypeName: 'Fontawesome',
  iconname: 'search',
  includeTemplate: true
}