import React from "react";
import PropTypes from "prop-types";
import net_icon from "../../assets/images/.net_icon.png";

const ArchiveAd = ({
  className,
  title,
  minimumExperience,
  createdAt,
  expiredAt,
  onShowAdDetails,
}) => {
  return (
    <div className={`archive-ad ${className}`} onClick={onShowAdDetails}>
      <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={net_icon} alt=".net icon" />
      </div>
      <div className="archive-ad-experience">
        {minimumExperience > 0 ? (
          <p>{minimumExperience}+ years of experience</p>
        ) : (
          <p>No experience needed</p>
        )}
      </div>
    </div>
  );
};

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

export default ArchiveAd;
