import React from 'react';
import clsx from 'clsx';
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_happy_announcement_ac67.svg',
    description: (
      <div className="card">
        <div className="card__footer">
          The core Whirl service was designed to be quick and easy to setup.
          <br /><br />

          Deployment options such
          as <a href="https://docs.docker.com/get-started/" target="_blank">Docker</a>,&nbsp;
          <a href="https://docs.docker.com/compose/" target="_blank">Docker Compose</a>, and&nbsp;
          <a href="https://github.com/Whirlsplash/whirl/releases/latest"
            target="_blank"
            aria-disabled>
              standalone binaries</a> are offered!
        </div>
        <div className="card__footer">
          <a href="/docs/whirl/deploying_setup" target="_blank">
            <button className="button button--primary button--block">
              Get Started
            </button>
          </a>
        </div>
      </div>
    ),
  },
  {
    title: 'Customizable',
    imageUrl: 'img/undraw_personalization_triu.svg',
    description: (
      <div className="card">
        <div className="card__footer">
          Whirl provides simple and fast customizability, zero fiddling required! Want to be a host
          or an admin in-game? done!
          <br /><br />

          <b>YOU</b> rule <b>YOUR</b> server.
        </div>
        <div className="card__footer">
          <a href="/docs/whirl/configuration" target="_blank">
            <button className="button button--primary button--block">
              Explore Configuration Options
            </button>
          </a>
        </div>
      </div>
    ),
  },
  {
    title: 'Built to Last',
    imageUrl: 'img/undraw_building_blocks_n0nc.svg',
    description: (
      <div className="card">
        <div className="card__footer">
          Much of Whirl has been written in <a href="https://www.rust-lang.org/">Rust</a>, a
          lightning fast, memory-safe, and maintainable, modern language. Gone are the days of
          having to maintain legacy code or having to keep fix bugs in software that wasn't written
          to be read, and it's all open-source!
        </div>
        <div className="card__footer">
          <a href="https://github.com/Whirlsplash/whirl" target="_blank">
            <button className="button button--primary button--block">
              View Source Code
            </button>
          </a>
        </div>
      </div>
    ),
  },
];

function Feature({imageUrl, title, description}) {
  const imgUrl = useBaseUrl(imageUrl);
  return (
    <div className={clsx('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>
  );
}

export default function Home() {
  const context = useDocusaurusContext();
  const { siteConfig = {}, } = context;
  return (
    <Layout title={"Home"}>
      <header className={clsx('hero hero--primary', styles.heroBanner)}>
        <div className="container">
          <h1 className="hero__title">{siteConfig.title}</h1>
          <p className="hero__subtitle">{siteConfig.tagline}</p>

          <div>
            <a href="https://discord.com/invite/8hn6padWF6">
              <img src="https://img.shields.io/discord/821938182274154506?style=for-the-badge&logo=appveyor"
                alt="Discord" />
            </a>&nbsp;
            <a href="https://www.codefactor.io/repository/github/whirlsplash/whirl">
              <img src="https://www.codefactor.io/repository/github/whirlsplash/whirl/badge?style=for-the-badge&logo=appveyor"
                alt="CodeFactor" />
            </a>&nbsp;
            <a href="https://saythanks.io/to/fuwnzy@gmail.com">
              <img src="https://img.shields.io/badge/Say%20Thanks-!-1EAEDB.svg?style=for-the-badge&logo=appveyor"
                alt="Say Thanks" />
            </a>&nbsp;
            <a href="https://github.com/Whirlsplash/whirl/blob/master/LICENSE">
              <img src="https://img.shields.io/github/license/Whirlsplash/whirl?style=for-the-badge&logo=appveyor"
                alt="License" />
            </a>
          </div>

          {/* <div className={styles.buttons}>
            <Link className={
              clsx('button button--secondary button--lg', styles.getStarted)
            } to={useBaseUrl('docs/')}>Get Started</Link>
          </div> */}
        </div>
      </header>

      <main>
        {/* features && */ features.length > 0 && (
          <section className={styles.features}>
            <div className="container">
              <div className="row">
                {features.map((props, idx) => (
                  <Feature key={idx} {...props} />
                ))}
              </div>
            </div>
          </section>
        )}
      </main>
    </Layout>
  )
}