import { Localized } from "@fluent/react/compat";
import React, { Component } from "react";

import { urls } from "coral-framework/helpers";
import { Button, Flex, Typography } from "coral-ui/components";

class FinalStep extends Component {
  public render() {
    return (
      <Flex direction="column" justifyContent="center" itemGutter="double">
        <Localized id="install-finalStep-description">
          <Typography variant="bodyCopy">
            Thanks for installing Coral! We sent an email to verify your email
            address. While you finish setting up the account, you can start
            engaging with your readers now.
          </Typography>
        </Localized>
        <Flex direction="row" itemGutter justifyContent="center">
          <Localized id="install-finalStep-goToTheDocs">
            <Button
              anchor
              color="regular"
              variant="filled"
              href="https://docs.coralproject.net"
              target="_blank"
            >
              Go to the Docs
            </Button>
          </Localized>
          <Localized id="install-finalStep-goToAdmin">
            <Button
              anchor
              color="primary"
              variant="filled"
              href={urls.admin.moderateReported}
            >
              Go to Admin
            </Button>
          </Localized>
        </Flex>
      </Flex>
    );
  }
}

export default FinalStep;
