import React, { Component } from 'react'
import Link from 'gatsby-link'

import iconReact from '../images/react.svg'
import iconHtml from '../images/html-5.svg'
import iconAmazon from '../images/amazon-webservices.svg'
import iconAngular from '../images/angular-js.svg'
import iconDocker from '../images/docker.svg'
import iconElastic from '../images/elastic.svg'
import iconEs6 from '../images/es6.svg'
import iconJenkins from '../images/jenkins.svg'
import iconMongo from '../images/mongodb.svg'
import iconMysql from '../images/mysql.svg'
import iconNode from '../images/nodejs.svg'
import iconPostgres from '../images/postgresql.svg'
import iconPython from '../images/python.svg'
import iconRuby from '../images/ruby.svg'
import iconRails from '../images/rails.svg'
import iconRedis from '../images/redis.svg'
import Carousel from './Carousel'

const Technologies = () => (
  <Carousel
    breakpoints={[
      {
        breakpoint: 576,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 3,
        },
      },
      {
        breakpoint: 992,
        settings: {
          slidesToShow: 5,
          slidesToScroll: 4,
        },
      },
    ]}
    dots={true}
    autoCycle={true}
    arrows={true}
    showSides={true}
    pauseOnHover={false}
    cycleInterval={2000}
    showSides={true}
    sidesOpacity={0.5}
    sideSize={0.1}
    slidesToScroll={2}
    slidesToShow={6}
    scrollOnDevice={true}
  >
    <div>
      <img src={iconHtml} alt="HTML5 Web Agency" />
      <h3 className="text-center">HTML5</h3>
    </div>
    <div>
      <img src={iconReact} alt="Reactjs Agency" />
      <h3 className="text-center">React</h3>
    </div>
    <div>
      <img src={iconAmazon} alt="Amazon Web Services Agency" />
      <h3 className="text-center">Amazon AWS</h3>
    </div>
    <div>
      <img src={iconAngular} alt="Angular Agency" />
      <h3 className="text-center">Angular</h3>
    </div>
    <div>
      <img src={iconDocker} alt="Docker Agency" />
      <h3 className="text-center">Docker</h3>
    </div>
    <div>
      <img src={iconElastic} alt="Elastic Agency" />
      <h3 className="text-center">Elastic</h3>
    </div>
    <div>
      <img src={iconEs6} alt="ES6 JavaScript Agency" />
      <h3 className="text-center">JS/ES6+</h3>
    </div>
    <div>
      <img src={iconJenkins} alt="Jenkins Web Consultancy" />
      <h3 className="text-center">Jenkins</h3>
    </div>
    <div>
      <img src={iconMongo} alt="Mongodb Agency" />
      <h3 className="text-center">Mongo DB</h3>
    </div>
    <div>
      <img src={iconMysql} alt="MySQL Web Agency" />
      <h3 className="text-center">MySQL</h3>
    </div>
    <div>
      <img src={iconNode} alt="NodeJS Web Agency" />
      <h3 className="text-center">Node.js</h3>
    </div>
    <div>
      <img src={iconPostgres} alt="PostgreSQL Web Agency" />
      <h3 className="text-center">PostgreSQL</h3>
    </div>
    <div>
      <img src={iconPython} alt="Python Web Consultancy" />
      <h3 className="text-center">Python</h3>
    </div>
    <div>
      <img src={iconRuby} alt="Ruby Web Agency" />
      <h3 className="text-center">Ruby</h3>
    </div>
    <div>
      <img src={iconRails} alt="Ruby on Rails Web Agency" />
      <h3 className="text-center">Ruby on Rails</h3>
    </div>
    <div>
      <img src={iconRedis} alt="Redis Services Consultancy" />
      <h3 className="text-center">Redis</h3>
    </div>
  </Carousel>
)

export default Technologies