import Scrollbutton from "react-bootstrap/Button";
import { ArrowUp, ArrowDown } from "react-bootstrap-icons";
import "../../../styles/captions.scss";
const FloridaCaption = (props) => {
  const { fetchedCase, displayCopy, onScrollClick } = props;

  return (
    <>
      <div className="docedit-super-row">
        <div className="docedit-uppercol1"></div>
        <div className="docedit-uppercol2 florida-court-header">
          <div className="florida-court-header-text">
            IN THE CIRCUIT COURT OF THE{" "}
            {fetchedCase?.jurisdiction.toUpperCase()}
          </div>
          <div className="florida-court-header-text2">
            OF FLORIDA, IN AND FOR {fetchedCase?.venue.toUpperCase()} COUNTY
          </div>
          <div className="pleading-divider-box"></div>
        </div>
        <div className="docedit-uppercol3"></div>
      </div>
      <div className="docedit-header-row">
        <div className="docedit-header-col1">
          <div className="docedit-header-text">Edit Document</div>
        </div>
        <div className="docedit-header-col2">
          <div className="header-middle-row1 florida-inner">
            {fetchedCase?.caption ? fetchedCase?.caption.toUpperCase() : <></>},
          </div>
          <div className="header-middle-row2">
            <div className="content-spacer"></div>
            <div className="middle-row-inner florida-inner">
              <div>Plaintiff(s),</div>
              <div className="casenum-box">
                Case No. {fetchedCase?.caseNumber}
              </div>
            </div>
          </div>
          <div className="header-middle-row3">
            <div>v.</div>
            {/*<div>Judge: {fetchedCase?.judge}</div>    */}
          </div>
          <div className="header-middle-row4 florida-inner">
            {fetchedCase?.captionTwo ? (
              fetchedCase?.captionTwo.toUpperCase()
            ) : (
              <></>
            )}
            ,
          </div>
          <div className="header-middle-row5">
            <div className="content-spacer2"></div>
            <div className="florida-inner">Defendant(s)</div>
          </div>
          <div className="pleading-divider-box">
            <div>
              ________________________________________________________________/
            </div>
          </div>
        </div>
        <div className="docedit-header-col3">
          <div className="scroll-button-box">
            <Scrollbutton onClick={onScrollClick} className="scroll-button">
              Scroll <ArrowUp /> <ArrowDown />
            </Scrollbutton>
          </div>
        </div>
      </div>
    </>
  );
};

export default FloridaCaption;
