import { SegmentationModelResultProps } from "./SegmentationSearch";
import "./SegmentationProps.scss";
import { forwardRef, useState } from "react";

const SegmentationResult = forwardRef<HTMLDivElement, SegmentationModelResultProps>(
  ({ segmentationModel, 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}. {segmentationModel.segmentation_model}
          </p>
        </div>
        {opened && (
          <div className="segmentation_model" style={{ marginLeft: "10px" }}>
            {segmentationModel.company_name.map((company, index) => {
              return <div key={company + index}>{company}</div>;
            })}
          </div>
        )}
        <div className="actions">
          <button className="link_button" onClick={() => setOpened(!opened)}>
            {opened ? "Свернуть состав" : "Развернуть состав"}
          </button>
        </div>
      </div>
    );
  }
);

export default SegmentationResult;