import { FunctionComponent } from 'react'
import { AdminPage } from '../../src/app'
import TileContainer from '../../src/app/components/TileContainer'
import Tile from '../../src/app/components/Tile'
import {
  faCube,
  faCubes,
  faDumbbell,
  faRunning,
  faWalking,
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const AdminOverview: FunctionComponent = () => {
  return (
    <AdminPage>
      <TileContainer>
        <Tile>
          <h2>
            Trainings
            <span className='icon'>
              <FontAwesomeIcon icon={faRunning} height='1em' />
            </span>
          </h2>
          <p>
            <span className='count'>4</span> Trainings
          </p>
          <p>
            <span className='count'>10</span> Blocks
          </p>
          <p>
            <span className='count'>6</span> Exercises
          </p>
        </Tile>
      </TileContainer>
    </AdminPage>
  )
}

export default AdminOverview