import { Fragment } from 'react';
import { useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { ArrowSmLeftIcon, ArrowSmRightIcon } from '@heroicons/react/outline';
import { fetchCard } from '../../redux/actions/card';
import NavLink from '../shared/buttons/nav-link';

function Footer() {
  const { cardId } = useParams();
  return (
    <Fragment>
      <div
        className={
          'align-center fixed bottom-0 left-0 flex w-full flex-row justify-between bg-black bg-opacity-60'
        }
      >
        <NavLink
          replace
          to={`/cards/${parseInt(cardId) + 1}/preview`}
          color='green'
          textColor='white'
          className='m-2'
        >
          <ArrowSmRightIcon width={20} height={20} className='stroke-current text-white' />
          بعدی
        </NavLink>
        {cardId > 1 && (
          <NavLink
            replace
            to={`/cards/${parseInt(cardId) - 1}/preview`}
            color='red'
            className='m-2'
          >
            قبلی
            <ArrowSmLeftIcon width={20} height={20} className='stroke-current text-white' />
          </NavLink>
        )}
      </div>
    </Fragment>
  );
}

Footer.propTypes = {
  fetchCard: PropTypes.func.isRequired
};

export default connect(null, { fetchCard })(Footer);
