import React from "react";
import PropTypes from "prop-types";
import { selectLogo } from "../../util/helpers/technologiesLogos";

const StatsAd = ({
  className,
  count,
  title,
  minimumExperience,
  createdAt,
  expiredAt,
  onShowAdDetails,
}) => {
  return (
    <div className={`archive-ad stats-ad ${className}`} onClick={onShowAdDetails}>
        <div className="ad-count">
            {count} prijavljenih
        </div>
      <div className="archive-ad-date">
        <p>
          {new Date(createdAt).toLocaleDateString()} -{" "}
          {new Date(expiredAt).toLocaleDateString()}
        </p>
      </div>
      <div className="archive-ad-title">
        <h3>{title}</h3>
      </div>
      <div className="archive-ad-image">
        <img src={selectLogo(title)} alt=".net icon" />
      </div>
      <div className="archive-ad-experience">
        {minimumExperience > 0 ? (
          <p>{minimumExperience}+ years of experience</p>
        ) : (
          <p>No experience needed</p>
        )}
      </div>
    </div>
  );
};

StatsAd.propTypes = {
  id: PropTypes.number,
  count: PropTypes.number,
  title: PropTypes.string,
  minimumExperience: PropTypes.number,
  createdAt: PropTypes.any,
  expiredAt: PropTypes.any,
  onShowAdDetails: PropTypes.func,
  className: PropTypes.any,
};

export default StatsAd;
