import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styled from 'styled-components';
import { Header, Container, H1, Center } from './common';
import styles from '../pages/styles.module.css';
import useBaseUrl from '@docusaurus/useBaseUrl';

const ActionButton = styled.a`
    ${props => {
        switch (props.type) {
            case 'primary':
                return `
          color: white; 
          background: var(--ifm-color-primary);
          &:hover {
            color: white;
            text-decoration: none;
            background: var(--ifm-color-primary-dark);
          }
        `;
            case 'secondary':
                return `
          &::after {
            content: "›";
            font-size: 24px;
            margin-left: 5px;
            text-align: center;
          }
        `;
        }
    }}
    padding: 0.7rem 1.1rem;
    font-size: 1.2em;
`;
const Title = styled(H1)`
    font-size: 3em;
    font-weight: 600;
`;
const Tagline = styled.p`
    font-size: 1.6em;
    text-align: center;
`;
const MainLogo = styled.img`
    max-width: 170px;
`;

const MainHeader = styled(Header)`
    padding-bottom: 40px;
`;

function ActionContainer() {
    return (
        <div>
            <ActionButton type="primary" href={'#quick-start'} target="_self">
                Quick start
            </ActionButton>
            <ActionButton type="secondary" href={useBaseUrl('docs/guides/getting-started')} target="_self">
                Learn basics
            </ActionButton>
        </div>
    );
}

export const Hero = () => {
    const context = useDocusaurusContext();
    const { siteConfig = {} } = context;
    return (
        <MainHeader>
            <Container>
                <Center>
                    <MainLogo src={'img/logox200.png'} />
                    <Title>{siteConfig.title}</Title>
                    <Tagline>{siteConfig.tagline}</Tagline>
                    <div className={styles.buttons}>
                        <ActionContainer />
                    </div>
                </Center>
            </Container>
        </MainHeader>
    );
};
