import Scrollbutton from "react-bootstrap/Button";
import { ArrowUp, ArrowDown } from "react-bootstrap-icons";
import "../../../styles/njcaption.scss";

const NewJerseyCaption = (props) => {
  const { fetchedCase, displayCopy, onScrollClick } = props;
  return (
    <div className="njcap-thirds">
      <div className="njcap-left">
        <div className="docedit-header-text">Edit Document</div>
      </div>
      <div className="njcap-middle">
        <div className="njcap-middle-left">
          <div className="njcap-divider"></div>
          <div className="njcap-parties">{fetchedCase.plaintiffParties}</div>
          <div className="njcap-plaintiff">
            <div className="njcap-plaintiff-left"></div>
            <div className="njcap-plaintiff-right">Plaintiff(s)</div>
          </div>
          <div className="njcap-plaintiff">
            <div className="njcap-plaintiff-left"></div>
            <div className="njcap-plaintiff-right"></div>
            <div className="njcap-plaintiff-right">
              <div className="njcap-vee">v.</div>
            </div>
          </div>
          <div className="njcap-parties">{fetchedCase.defendantParties}</div>
          <div className="njcap-plaintiff">
            <div className="njcap-plaintiff-left"></div>
            <div className="njcap-plaintiff-right">Defendant(s)</div>
          </div>
          <div className="njcap-divider2"></div>
        </div>
        <div className="njcap-middle-right">
          <div className="njcap-middle-right-left">
            <span>)</span>
            <span>)</span>
            <span>)</span>
            <span>)</span>
            <span>)</span>
            <span>)</span>
            <span>)</span>
            <span>)</span>
            <span>)</span>
            <span>)</span>
            <span>)</span>
          </div>
          <div className="njcap-middle-right-right">
            <div className="njcap-case-info-top">
              {fetchedCase.jurisdiction}
            </div>
            <div className="njcap-case-info">{fetchedCase.venue}</div>
            <div className="njcap-case-info"></div>
            <div className="njcap-case-info">
              Docket No. {fetchedCase.caseNumber}
            </div>
          </div>
        </div>
      </div>
      <div className="njcap-right">
        <Scrollbutton onClick={onScrollClick} className="scroll-button">
          Scroll <ArrowUp /> <ArrowDown />
        </Scrollbutton>
      </div>
    </div>
  );
};

export default NewJerseyCaption;