import React, { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import getRingClassName from '../../../utils/getRingClassName';

interface RingClickProps {
  title: string;
  number: number;
  children: ReactNode;
}

const CommitteeRingItem: React.FC<RingClickProps> = ({
  title,
  number,
  children,
}) => {
  const { t } = useTranslation();

  return (
    <div className={`ring ${getRingClassName(number)} `}>
      <h2>
        <span>{`${t('RING')} ${number}`}</span>
        {title}
      </h2>
      <span className="ringBorder" />
      <div className="membersWrapper">{children}</div>
    </div>
  );
};

export default CommitteeRingItem;