import React from "react";
import { connect } from "react-redux";
import Slider from "react-slick";

function NextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <button
      className={className}
      style={{ ...style }}
      onClick={onClick}
    >
      <svg width={8} height={12} fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="m1 1 6 5-5.25 5"
          stroke="#fff"
          strokeWidth={2}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </button>
  );
}

function PrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <button
      className={className}
      style={{ ...style }}
      onClick={onClick}
    >
      <svg width={8} height={12} fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M7 11 1 6l5.25-5"
          stroke="#fff"
          strokeWidth={2}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </button>
  );
}

class FeedUsers extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      company: {},
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    return {};
  }

  render() {
    const settings = {
      dots: false,
      infinite: false,
      speed: 500,
      slidesToShow: 2,
      slidesToScroll: 1,
      centerMode: false,
      variableWidth: false,
      nextArrow: <NextArrow />,
      prevArrow: <PrevArrow />,
    };

    return (
      <div className="feed">
        <div className="feed_list">
          <Slider {...settings}>
            <div className="feed_item user">
              <img src="/assets/images/icons/avatar.svg" alt="" />
              <div>
              <p className="item_title">Иванов Иван</p>
              <p className="item_desc">
                Менеджер по продажам
              </p>
              </div>
            </div> 

            <div className="feed_item user">
              <img src="/assets/images/icons/avatar.svg" alt="" />
              <div>
              <p className="item_title">Иванов Иван</p>
              <p className="item_desc">
                Менеджер по продажам
              </p>
              </div>
            </div> 

            <div className="feed_item user">
              <img src="/assets/images/icons/avatar.svg" alt="" />
              <div>
              <p className="item_title">Иванов Иван</p>
              <p className="item_desc">
                Менеджер по продажам
              </p>
              </div>
            </div> 

            <div className="feed_item user">
              <img src="/assets/images/icons/avatar.svg" alt="" />
              <div>
              <p className="item_title">Иванов Иван</p>
              <p className="item_desc">
                Менеджер по продажам
              </p>
              </div>
            </div> 

            <div className="feed_item user">
              <img src="/assets/images/icons/avatar.svg" alt="" />
              <div>
              <p className="item_title">Иванов Иван</p>
              <p className="item_desc">
                Менеджер по продажам
              </p>
              </div>
            </div> 

            <div className="feed_item user">
              <img src="/assets/images/icons/avatar.svg" alt="" />
              <div>
              <p className="item_title">Иванов Иван</p>
              <p className="item_desc">
                Менеджер по продажам
              </p>
              </div>
            </div> 
          </Slider>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {};
}

export default connect(mapStateToProps)(FeedUsers);