import React from "react";

import "./catalogPersonCard.scss";

export const CatalogPersonCard = ({
  img,
  name,
  salary,
  category,
  skills,
  level,
  description
}) => {
  return (
    <div className="catalog-person-card">
      <div className="catalog-person-card__head">
        <div className="catalog-person-card__avatar">
          <img src={img} alt="avatar" />
          <span className="catalog-person-card__skill">{level}</span>
        </div>
        <div className="catalog-person-card__info">
          <span className="catalog-person-card__name">{name}</span>
          <span className="catalog-person-card__salary">{salary} / час</span>
          <p className="catalog-person-card__category">
            <span>Разработка:</span> {category}
          </p>
        </div>
      </div>
      <div className="catalog-person-card__items">
        {skills.map((item, index) => {
          return (
            <div className="catalog-person-card__skill-item" key={index}>
              {item}
            </div>
          );
        })}
      </div>
      <p className="catalog-person-card__description">{description}</p>
    </div>
  );
};

export default CatalogPersonCard;