import React, { useState } from 'react';
import { CommitteeProps } from '../../../model/components/committee';
import CommitteeContent from './CommitteeContent';
import CommitteeRings from './CommitteeRings';

const CommitteePage: React.FC<CommitteeProps> = ({
  rings,
  committeeMembers,
}) => {
  const [activeMember, setActiveMember] = useState<number>(0);

  return (
    <section className="committee desktop">
      <CommitteeRings
        rings={rings}
        committeeMembers={committeeMembers}
        activeMember={activeMember}
        onChangeActiveMember={setActiveMember}
      />
      <CommitteeContent activeMember={committeeMembers[activeMember]} />
    </section>
  );
};

export default CommitteePage;