import { useState } from "react";
import Modal from "react-bootstrap/Modal";
function CarrierDetailsLanding(props) {
  const terminalNamesArray = props?.id?.id?.split(",");
  const [smShow, setSmShow] = useState(false);
  return (
    <>
      <a className="showmorebutton me-2" onClick={() => setSmShow(true)}>
        View more...
      </a>
      <Modal
        className="map_modal"
        size="sm"
        show={smShow}
        onHide={() => setSmShow(false)}
        aria-labelledby="example-modal-sizes-title-sm"
      >
        <Modal.Header closeButton>
          <Modal.Title
            id="example-modal-sizes-title-sm"
            className="map_modal_header"
          >
            {props?.id?.d}
          </Modal.Title>
          <button className="revert" onClick={() => setSmShow(false)}>
            X
          </button>
        </Modal.Header>
        <Modal.Body className="overflow-auto ">
          {terminalNamesArray?.map((item: any, index: any) => {
            return (
              <>
                <p>{`  ${item}`}</p>
              </>
            );
          })}
        </Modal.Body>
      </Modal>
    </>
  );
}

export default CarrierDetailsLanding;