/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import useTranslate from '~hooks/useTranslate/useTranslate';
import Check from '~images/icons/check';
import styles from './expertise.module.scss';

export default function TemplateOne({ className = '', expertise, icon = <Check /> }) {
  return (
    expertise && (
      <div className={`${className || ''} ${styles?.expertise || ''}`}>
        <span>{useTranslate('expert_on', 'Expert on')}: </span>
        <ul>
          {expertise.map((item, index) => (
            // eslint-disable-next-line react/no-array-index-key
            <li key={index}>
              {icon}
              {item}
            </li>
          ))}
        </ul>
      </div>
    )
  );
}

TemplateOne.propTypes = {
  className: PropTypes.string,
  expertise: PropTypes.arrayOf(PropTypes.string),
  icon: PropTypes.element,
};
