import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import CodeBlock from '@theme/CodeBlock';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';

function Hero() {
    return (
        <header className={clsx('container', styles.heroBanner)}>
            <div className="row padding-horiz--md">
                <div className="col col--7">
                    <div className={clsx(styles.relative, 'row')}>
                        <div className="col">
                            <h1 className={styles.tagline}>Apify API client for JavaScript</h1>
                            <h1 className={styles.tagline}>
                                {/* eslint-disable-next-line max-len */}
                                <span>Apify API client</span> for JavaScript
                            </h1>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col">
                            <h2></h2>
                            <h2>
                                The official library to interact with Apify API from a web browser, Node.js, JavaScript,
                                or TypeScript applications, providing convenience functions and automatic retries on
                                errors.
                            </h2>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col">
                            <div className={styles.heroButtons}>
                                <Link to="docs" className={styles.getStarted}>
                                    Get Started
                                </Link>
                                <iframe
                                    src="https://ghbtns.com/github-btn.html?user=apify&repo=apify-client-js&type=star&count=true&size=large"
                                    frameBorder="0"
                                    scrolling="0"
                                    width="170"
                                    height="30"
                                    title="GitHub"
                                ></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={clsx(styles.relative, 'col', 'col--5')}>
                    <div className={styles.logoBlur}>
                        <img src={require('/img/logo-blur.png').default} className={clsx(styles.hideSmall)} />
                    </div>
                    <div className={styles.codeBlock}>
                        <CodeBlock className="language-bash">npm install apify-client</CodeBlock>
                    </div>
                </div>
            </div>
        </header>
    );
}

export default function Home() {
    const { siteConfig } = useDocusaurusContext();
    return (
        <Layout description={siteConfig.description}>
            <Hero />
            <div>
                <div className="container">
                    <div className="row padding-horiz--md">
                        <div className="col col--4">
                            <p style={{ lineHeight: '200%' }}>
                                Easily run Actors, await them to finish using the convenient <code>.call()</code>{' '}
                                method, and retrieve results from the resulting dataset.
                            </p>
                        </div>
                        <div className="col col--8">
                            <CodeBlock language="javascript">{`const { ApifyClient } = require('apify-client');

const client = new ApifyClient({
    token: 'MY-APIFY-TOKEN',
});

// Starts an actor and waits for it to finish.
const { defaultDatasetId } = await client.actor('john-doe/my-cool-actor').call();

// Fetches results from the actor's dataset.
const { items } = await client.dataset(defaultDatasetId).listItems();`}</CodeBlock>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    );
}
