import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import ScrappeStatus from '../../components/ScrapeRequest/ScrappeStatus'
const ScrappeDetails = (details) => {
    const {t} = useTranslation();
    return (
            (details.details) ? 
                <section>
                    <h2>Scrappe Details</h2>                    
                    <br/>
                    <div className="row">
                        <div className="com-md-4">
                            {
                                (details.details.location) ?
                                    <h3>{details.details.location}</h3>
                                    : ''}
                            {
                                (details.details.estimate) ?
                                    <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {(new Date(details.details.estimate)).toLocaleString()}</span>
                                    : ''}
                        </div>
                        <div className="col-md-4">
                            {
                                (details.details.filters && details.details.filters.length > 0) ?
                                    <div className="filters-cont">
                                        <h3>Filters</h3>
                                        {details.details.filters.map((filter,i) => <span className="badge bg-primary m-1" key={i}>{filter.name}</span>) }
                                    </div>
                                    :'' }
                        </div>
                        <div className="col-md-1">
                                {details.details.status ? <ScrappeStatus status = {details.details.status} /> : '' }
                        </div>
                    </div>
                    
                </section>
                : ''
            
        
    );

}

ScrappeDetails.propTypes = {
    details: PropTypes.object
};

export default ScrappeDetails;