import React from 'react'
import { Flex, Box } from 'reflexbox'
import Radium from 'radium'
import Flip from '../../utils/animations/flip-card/flip-card'
import { Column, Section } from '../../utils'
import reactIcon from '../../utils/icons/images/react.png'
import RealyIcon from '../../utils/icons/images/relay.svg'
import WebpackIcon from '../../utils/icons/images/webpack.svg'
import ReduxIcon from '../../utils/icons/images/redux.svg'
import NpmIcon from '../../utils/icons/images/npm.svg'
import GitHubIcon from '../../utils/icons/images/github.svg'
import ImmutableIcon from '../../utils/icons/images/immutable.svg'
import FlowIcon from '../../utils/icons/images/flow.svg'
import BabelIcon from '../../utils/icons/images/babel.svg'
import NodeIcon from '../../utils/icons/images/node.svg'
import CircleCiIcon from '../../utils/icons/images/circleci.svg'
import rxJSIcon from '../../utils/icons/images/rxjs@2x.png'
import IconContainer from '../../utils/icons/icon-container'
import styles from './stack.styles'

function Stack() {
  return (
    <Section>
      <article>
        <Column>
          <h2 style={styles.mainTitle}>Our stack</h2>
            <Flex col={12} justify="center" wrap>
              <IconContainer>
                <Flip>
                  <div>
                    TEXT FRONT
                  </div>
                  <div>TEXT BACK</div>
                </Flip>
              </IconContainer>
              <IconContainer>
                <Flip>
                    <ReduxIcon />
                  <img src={reactIcon} alt="React" />
                </Flip>
              </IconContainer>
              <IconContainer>
                <Flip>
                    <ReduxIcon />
                  <img src={reactIcon} alt="React" />
                </Flip>
              </IconContainer>
              <IconContainer>
                <Flip>
                    <ReduxIcon />
                  <img src={reactIcon} alt="React" />
                </Flip>
              </IconContainer>
              <Box sm={2}>
                <Flip>
                    <ReduxIcon />
                  <img src={reactIcon} alt="React" />
                </Flip>
              </Box>
              <Box sm={2}>
                <Flip>
                    <WebpackIcon />
                    <WebpackIcon />
                </Flip>
              </Box>
          </Flex>
        </Column>
      </article>
    </Section>
  )
}

export default Radium(Stack)