import React from 'react';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import ScrapeRequest from '../ScrapeRequest/ScrapeRequest';
import './ScrappeRequests.scss'

// const scrape = { Title: "#1 Chicago, IL", Count: "200", EstimatedTime: "20/7/2021 20:30AM", Url: "https://www.apartments.com/chicago-il/", Filters: [{ id: 1, type: "prices" }, { id: 2, type: "beds" }, { id: 3, type: "type" }, { id: 4, type: "lifestyle" }] };
const ScrapeRequests = ({ scrappes, handleExecute }) => {
  const { t } = useTranslation();

  return (
    <div className="card">
      <div className="card-header">
        <h3 className="card-title">{t('scrapeRequests.Title')}</h3>
      </div>
      {scrappes.length === 0 ? <tbody><tr><td><span className='center-align'>Nothing to show</span></td></tr></tbody> :
        <div className="card-body p-0">
          <table className="table table-sm">
            <thead>
              <tr>
                <th className='font-weight-bold'>{t('scrapeRequests.Columns.Scrape')}</th>
                <th>{t('scrapeRequests.Columns.Filters')}</th>
                <th>{t('scrapeRequests.Columns.Status')}</th>
              </tr>
            </thead>
            <tbody>
              {scrappes.map((scrape, i) => <ScrapeRequest handleExecute={handleExecute} index={i + 1} key={scrape._id} scrape={scrape} />)}
            </tbody>
          </table>
        </div>}
    </div>
  );
}

ScrapeRequests.propTypes = {
  handleExecute: PropTypes.func,
  scrappes: PropTypes.array
};
export default ScrapeRequests;