/* eslint-disable react/forbid-prop-types */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import LazyImage from '~hooks/lazy-image';
import { translate } from '~helpers/getters';
import { Context } from '~context/MainProvider';
import styles from './expertise.module.scss';

export default function TemplateOne({ className = '', expertise, icon }) {
  const { translations } = useContext(Context) || {};

  return (
    expertise && (
      <div className={`${className || ''} ${styles?.expertise || ''}`}>
        <span>{translate(translations, 'expert_on', 'Expert on')}: </span>
        <ul>
          {expertise.map((item, index) => (
            // eslint-disable-next-line react/no-array-index-key
            <li key={index}>
              <LazyImage
                src={icon || '../../../images/check.svg'}
                alt={translate(translations, 'check', 'Check')}
                loading="eager"
                width={10}
                height={10}
              />
              {item}
            </li>
          ))}
        </ul>
      </div>
    )
  );
}

TemplateOne.propTypes = {
  className: PropTypes.string,
  expertise: PropTypes.array,
  icon: PropTypes.string,
};
