import {Grid, Typography, Button} from '@material-ui/core';
import {Link} from 'react-router-dom';

import React from 'react';
import {Route, Switch, useRouteMatch} from 'react-router-dom';
import Page from '../../components/Page';
import UnicornNode from '../UnicornNode';
import useBank from '../../hooks/useBank';
import {createGlobalStyle} from 'styled-components';
import NodesInfoCard from '../../components/NodesInfoCard';
import HomeImage from '../../assets/img/fairybg.gif';

const BackgroundImage = createGlobalStyle`
  body {
    background: url(${HomeImage}) repeat !important;
    background-size: cover !important;
    // background: linear-gradient(90deg, rgba(144,17,105,1) 0%, rgba(95,17,144,1) 100%);
    ;
  }
`;

const UnicornNodes = () => {
  const {path} = useRouteMatch();

  const unicornNodeBank = useBank('UnicornNode');
  const unicornWcroSWBank = useBank('LPNode');
  const unicornWrlsBank = useBank('LPWlrsNode');

  return (
    <Page>
      <BackgroundImage />
      <Switch>
        <Route exact path={path}>
          <Typography color="textPrimary" align="center" variant="h3" gutterBottom>
            Nodes
          </Typography>
          <Typography color="textPrimary" align="center" variant="h6" gutterBottom style={{marginBottom: '20px'}}>
            Buy Nodes and lock supply to earn daily returns
            {/* <br />
            Earn monthly airdrops by buying Nodes and NFTs */}
          </Typography>
          {/* <Grid container>
            <Button
              component={Link}
              to={`/leaderboard`}
              className="shinyButton"
              style={{marginLeft: 'auto', marginRight: 'auto', textAlign: 'center'}}
            >
              Go to Leaderboard
            </Button>
          </Grid> */}

          <Grid container spacing={3} style={{marginTop: '30px'}}>
            <NodesInfoCard bank={unicornNodeBank} />
            {/* <NodesInfoCard bank={unicornWcroSWBank} /> */}
            {/* <NodesInfoCard bank={unicornWrlsBank} /> */}
          </Grid>
        </Route>
        <Route path={`${path}/:bankId`}>
          <UnicornNode />
        </Route>
      </Switch>
    </Page>
  );
};

export default UnicornNodes;