import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ModuleButton from 'components/items/ModuleButton';
import styleIdentifiers from './list.scss';

// Assets

import Insta from '../assets/instagram.svg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ListProps = StateProps & DispatchProps & OwnProps;

const List = (props: ListProps) => {
  const { history } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  return (
    <div className={styles('list')}>
      <div className={styles('card')}>
        <div className={styles('image')}>
          <img src={Insta} alt="instagram" />
        </div>
        <div className={styles('content')}>
          <div className={styles('title')}>Instagram</div>
          <div className={styles('info')}>Intégrer votre feed instagram à votre site web</div>
        </div>
        <div className={styles('button')}>
          <ModuleButton
            action={() => history.push('/settings/integrations/instagram')}
            label="Integrate"
          />
        </div>
      </div>
    </div>
  );
};

export default List;
