import React from 'react';
import { useTranslation } from 'react-i18next';
import { CommitteeProps } from '../../../model/components/committee';
import CommitteeContent from './CommitteeContent';
import Committee from '../../icons/Committee';

const CommitteeMobile: React.FC<CommitteeProps> = ({
  rings,
  committeeMembers,
}) => {
  const { t } = useTranslation();

  return (
    <section className="committee mobile">
      <div className="pageMobileTitle">
        <Committee size="medium" /> <h2>Comité Dialípico</h2>
      </div>
      {rings.map((item) => (
        <>
          <div className="ringName" key={item.order}>
            <p className="number">{`${t('RING')} ${item.order}`}</p>
            <p className="name">{item.title}</p>
          </div>
          {committeeMembers.map((member) => {
            return member.ring.id === item.id ? (
              <CommitteeContent activeMember={member} />
            ) : null;
          })}
        </>
      ))}
    </section>
  );
};

export default CommitteeMobile;