import React from "react";
import classnames from "classnames";
import Layout from "@theme/Layout";
import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import useBaseUrl from "@docusaurus/useBaseUrl";
import styles from "./styles.module.css";

const features = [
    {
        title: <>Easy to Use</>,
        imageUrl: "img/undraw_docusaurus_mountain.svg",
        description: (
            <>
                Docusaurus was designed from the ground up to be easily installed and used to get
                your website up and running quickly.
            </>
        )
    },
    {
        title: <>Focus on What Matters</>,
        imageUrl: "img/undraw_docusaurus_tree.svg",
        description: (
            <>
                Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go ahead and
                move your docs into the <code>docs</code> directory.
            </>
        )
    },
    {
        title: <>Powered by React</>,
        imageUrl: "img/undraw_docusaurus_react.svg",
        description: (
            <>
                Extend or customize your website layout by reusing React. Docusaurus can be extended
                while reusing the same header and footer.
            </>
        )
    }
];

function Feature({ imageUrl, title, description }) {
    const imgUrl = useBaseUrl(imageUrl);
    return (
        <div className={classnames("col col--4", styles.feature)}>
            {imgUrl && (
                <div className="text--center">
                    <img className={styles.featureImage} src={imgUrl} alt={title} />
                </div>
            )}
            <h3>{title}</h3>
            <p>{description}</p>
        </div>
    );
}

function Home() {
    const context = useDocusaurusContext();
    const { siteConfig = {} } = context;
    return (
        <Layout
            title="hyperglass"
            description="hyperglass is the network looking glass that tries to make the internet better."
        >
            <header className={classnames("hero hero--primary", styles.heroBanner)}>
                <div className="container">
                    <h1 className="hero__title">{siteConfig.title}</h1>
                    <p className="hero__subtitle">{siteConfig.tagline}</p>
                    <div className={styles.buttons}>
                        <Link
                            className={classnames(
                                styles.getStarted,
                                "button button--outline button--secondary button--lg"
                            )}
                            to={useBaseUrl("docs/introduction")}
                        >
                            Get Started
                        </Link>
                    </div>
                </div>
            </header>
            <main>
                {features && features.length && (
                    <section className={styles.features}>
                        <div className="container">
                            <h3 style={{ textAlign: "center" }}>
                                This site is currently under construction
                            </h3>
                            <div className="row">
                                {features.map((props, idx) => (
                                    <Feature key={idx} {...props} />
                                ))}
                            </div>
                        </div>
                    </section>
                )}
            </main>
        </Layout>
    );
}

export default Home;