import React from 'react';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';

const ScrapeRequest = ({ scrape }) => {
    const { t } = useTranslation();

    function handleSubmit(event) {
        event.preventDefault();
    }
    return (
        <tr>
            <td>
                <p>
                </p><h3>{scrape.Title}</h3>
                <span className="text-muted">Count {scrape.Count} +</span>
                <span> | </span>
                <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {scrape.EstimatedTime}</span>
                <span> | </span>
                {t('scrapeRequest.ViewScrape')} <a href="scrappe.html"> {scrape.Url}</a>
                <p></p>
                <p>
                </p>
            </td>
            <td>
                {scrape.Filters.map(element => (
                    <span key={element.id} className="badge bg-primary m-1">{element.type}</span>
                ))}
            </td>
            <td><button type="submit" className="btn btn-xs btn-block btn-primary" onClick={handleSubmit}><i className="fa fa-bell"></i>{t('common.execute')}</button>
            </td>
        </tr>
    );
}

ScrapeRequest.propTypes = {
    scrape: PropTypes.object
};

export default ScrapeRequest;