import React from "react";
import PropTypes from "prop-types";
import { CANDIDATES_DETAILS_PAGE } from "../../constants/pages";
import { useHistory } from "react-router-dom";

const AdDetailsCandidateCard = ({
  className,
  id,
  firstName,
  lastName,
  experience,
  cv,
}) => {
  const history = useHistory();
  return (
    <div data-testid="ad-details-candidate" className={`ad-details-candidate ${className}`}>
      <div className="ad-details-candidate-date">
        <p>{new Date().toLocaleDateString()}</p>
      </div>
      <div className="ad-details-candidate-title">
        <h3 data-testid="ad-details-candidate-title-link" onClick={() => history.push(CANDIDATES_DETAILS_PAGE.replace(":id", id))}>
          {firstName} {lastName}
        </h3>
      </div>
      <div className="ad-details-candidate-experience">
        {experience > 0 ? (
          <p>{experience}+ years of experience</p>
        ) : (
          <p>No experience</p>
        )}
      </div>
      <div className="ad-details-candidate-buttons">
        <button>React</button>
        <button>.NET</button>
        <button>Angular</button>
      </div>
      <div className="ad-details-candidate-cv">
        <a href="#">{cv}</a>
      </div>
    </div>
  );
};

AdDetailsCandidateCard.propTypes = {
  className: PropTypes.any,
  id: PropTypes.number,
  firstName: PropTypes.string,
  lastName: PropTypes.string,
  experience: PropTypes.number,
  cv: PropTypes.string,
};

export default AdDetailsCandidateCard;