import React from 'react';
import { Table } from 'reactstrap';
import JKPerson from './JKPerson';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';

const JKPeopleList = ({ people }) => {
  const { t } = useTranslation();
  return (
    <Table striped bordered className="fs--1" data-testid="peopleListTable">
      <thead className="bg-200 text-900">
        <tr>
          <th scope="col">{t('person_attributes.name', { ns: 'people' })}</th>
          <th scope="col" style={{ minWidth: 250 }}>
            {t('person_attributes.about', { ns: 'people' })}
          </th>
          <th scope="col">{t('person_attributes.instruments', { ns: 'people' })}</th>
          <th scope="col">{t('person_attributes.genres', { ns: 'people' })}</th>
          <th scope="col">{t('actions', { ns: 'common' })}</th>
        </tr>
      </thead>
      <tbody className="list">
        {people.map((person) => (
          // <tr className="align-middle" key={`people-list-item-${person.id}`}>
            <JKPerson person={person} viewMode="list" key={`jk-person-${person.id}`} />
          // </tr>
        ))}
      </tbody>
    </Table>

  );
};

JKPeopleList.propTypes = {
  people: PropTypes.arrayOf(PropTypes.instanceOf(Object))
};

export default JKPeopleList;
