import { useTranslation } from 'react-i18next'
import { Col, Row, Alert } from 'react-bootstrap'

function Canceled() {
  const { t } = useTranslation()

  return (
    <div className="container">
      <Row>
        <Col md={8} mdOffset={2}>
          <div className="card">
            <div className="page-header">
              <h2>{t('subscription_canceled')}</h2>
            </div>
            <Alert bsStyle="info">
              <p>
                {t('to_modify_your_subscription_go_to')}&nbsp;
                <a href="/user/subscription" rel="noopener noreferrer">
                  {t('manage_subscription')}.
                </a>
              </p>
            </Alert>
            <p>
              <a
                className="btn btn-primary"
                href="/project"
                rel="noopener noreferrer"
              >
                &lt; {t('back_to_your_projects')}
              </a>
            </p>
          </div>
        </Col>
      </Row>
    </div>
  )
}

export default Canceled