import useTranslation from "next-translate/useTranslation"
import InfiniteScroll from "react-infinite-scroll-component"

import { Divider } from "../../design/Divider"
import { Loader } from "../../design/Loader"
import { useMembers } from "../../../contexts/Members"
import { Member } from "./Member"
import { capitalize } from "../../../tools/utils/capitalize"

export const Members: React.FC = () => {
  const { members, hasMore, nextPage } = useMembers()

  const { t } = useTranslation()

  return (
    <>
      <div className="mb-2">
        <h1 data-cy="members-title" className="my-2 pt-2 text-center text-xl">
          {capitalize(t("application:members"))}
        </h1>
        <Divider />
      </div>
      <InfiniteScroll
        className="members-list"
        dataLength={members.length}
        next={nextPage}
        hasMore={hasMore}
        loader={<Loader />}
      >
        {members.map((member) => {
          return <Member key={member.id} member={member} />
        })}
      </InfiniteScroll>
    </>
  )
}