import { hot } from "react-hot-loader/root";
import React, { FunctionComponent } from "react";

import { Countdown } from "@/components/Countdown";

import logo from "../assets/logo.svg";

import styles from "./App.less";

const App: FunctionComponent = () => (
  <div className={styles.App}>
    <header className={styles["App-header"]}>
      <img src={logo} className={styles["App-logo"]} alt="logo" />
      <p>
        Edit&nbsp;
        <code><%= modifyFile %></code>
        &nbsp;and save to reload.
      </p>
      <a className={styles["App-link"]} href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
        Learn React
      </a>
      <a className={styles["App-link"]} href="http://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">
        Learn TypeScript
      </a>
      <p>
        Any questions contract author&apos;s dingtalk:&nbsp;
        <strong>Brendan.ye</strong>
      </p>

      <Countdown remainingTime={1 * 24 * 60 * 60 * 1000} />
    </header>
  </div>
);

export default hot(App);