import React from "react"
import { useEthers } from "@usedapp/core";

import { usePools } from "./hooks";
import styles from './styles';
import { fhtLogo }  from './assets';
import { Exchange, Loader, WalletButton } from "./components";


const App = () => {
    const { account } = useEthers();
    const [poolsLoading, pools] = usePools();

  return (
    <div className={styles.container}>
      <div className={styles.innerContainer}>
        <header className={styles.header}>
            <img src={fhtLogo} alt="FHT Logo" className="w-16 h-16 object-contain"/>
            {/*<img src={TechniKoinLogo} alt="TechniKoinLogo" className="w-60 h-16 object-contain" />*/}
            <WalletButton />
        </header>

        <div className={styles.exchangeContainer}>
            <h1 className={styles.headTitle}>TechniSwap</h1>
            <p className={styles.subTitle}>Exchange your ETH to FHT</p>

            <div className={styles.exchangeBoxWrapper}>
                <div className={styles.exchangeBox}>
                    <div className="green_gradient" />
                    <div className={styles.exchange}>
                        {account ? (
                            loading ? (
                                <Loader title="Loading pools, please wait!" />
                            ) : <Exchange pools = {pools}/>
                        ) : <Loader title="Please connect your wallet!"/>}
                    </div>
                    <div className="blue_gradient" />
                </div>
            </div>
        </div>
      </div>
    </div>
  )
}

export default App;