import React from "react";
import { Link } from "react-router-dom";

import titleImg from "assets/images/VacancyItemImg.svg";

import "./vacancyItem.scss";

export const VacancyItem = ({
  vacancy: { name, description, level, price, location, count }
}) => {
  return (
    <div className="vacancy__item">
      <div className="vacancy__item__head">
        <div className="vacancy__item__title">
          <span className="vacancy__item__img">
            <img src={titleImg} alt="img" />
          </span>
          <h4>{name}</h4>
        </div>
        <p className="vacancy__item__description">{description}</p>
      </div>
      <div className="vacancy__item__block">
        <div className="vacancy__item__block--left">
          <div className="vacancy__item__info">
            <span>Грейд:</span>
            <p>{level}</p>
          </div>
          <div className="vacancy__item__info">
            <span>Ставка:</span>
            <p>{price}</p>
          </div>
          <Link
            to={"/profile/open-requests/12"}
            className="vacancy__item__more"
          >
            Все требования по вакансии
          </Link>
        </div>
        <div className="vacancy__item__block--right">
          <div className="vacancy__item__info">
            <span>Локация:</span>
            <p>{location}</p>
          </div>
          <div className="vacancy__item__info">
            <span>Кол-во человек:</span>
            <p>{count}</p>
          </div>
        </div>
      </div>
      <button className="vacancy__item__btn">Откликнуться</button>
    </div>
  );
};