import React from 'react';
import { Box, Divider, Paper, Typography } from '@material-ui/core';
import { Launch as LaunchIcon } from '@material-ui/icons';

const StripeSectionAside = () => {
  return (
    <>
      <Box mb={3}>
        <Paper>
          <Box p={2}>
            <Typography gutterBottom variant="h6">Description:</Typography>
            <Typography variant="body2">
              Stripe is an online payment processing and credit card processing platform.
            </Typography>
            <br/>
            <Typography variant="body2">
              Stripe allows safe and efficient processing of funds via credit card or bank and transfers those funds to the sellers account.
            </Typography>
          </Box>
        </Paper>
      </Box>

      <Paper>
        <Box p={2}>
          <Typography gutterBottom variant="h6">How To Set Up and Use Stripe:</Typography>
          <Typography variant="body2">Setting up a Stripe Account for your business takes a few simple steps:</Typography>
          <br/>
          <Typography variant="body2">
            Stripe allows safe and efficient processing of funds via credit card or bank and transfers those funds to the sellers account.
          </Typography>
          <ol>
            <li>
              <Typography variant="body2">
                Register with Stripe <a href="https://dashboard.stripe.com/register" target="_blank">here</a>
              </Typography>
            </li>
            <li>
              <Typography variant="body2">
                Verify the email address you’ve signed up with in your inbox
              </Typography>
            </li>
            <li>
              <Typography variant="body2">
                Activate your account
              </Typography>
            </li>
            <li>
              <Typography variant="body2">
                Add banking information
              </Typography>
            </li>
          </ol>
          <Box my={2}>
            <Divider light />
          </Box>
          <Box component="a" href="https://dashboard.stripe.com/apikeys" target="_blank" display="flex" alignItems="center">
            <LaunchIcon />
            <Box ml={1}>Stripe Credentials</Box>
          </Box>
        </Box>
      </Paper>
    </>
  );
}

export default StripeSectionAside;
