src/components/views/search/groupResults/GroupResults.tsx

import { forwardRef, useState } from "react";
import { GroupResultsProps } from "./GroupResultsProps";
import "../searchResultsItem/SearchResultsItem.scss";
import "./GroupResults.scss";

const GroupResults = forwardRef<HTMLDivElement, GroupResultsProps>(({ group, index }, ref) => {
  const [opened, setOpened] = useState<boolean>(false);

  return (
    <div className="search_result_item" ref={ref}>
      <div className="document">
        <p className="link_button">
          {index + 1}. {group.group_name}
        </p>
      </div>
      {opened && (
        <div className="group_info" style={{ marginLeft: "10px" }}>
          <table>
            <thead>
              <tr>
                <th>ФИО</th>
                <th>Должность внутри группы</th>
              </tr>
            </thead>
            <tbody>
              {group.group_composition.map((person, index) => {
                return (
                  <tr key={person?.person_name + index}>
                    <td>{person?.person_name}</td>
                    <td>{person?.position_in_group.replace("Члены", "Член")}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
      <div className="actions">
        <button className="link_button" onClick={() => setOpened(!opened)}>
          {opened ? "Свернуть состав" : "Развернуть состав"}
        </button>
      </div>
    </div>
  );
});

export default GroupResults;