import React from "react";
import { Accordion, Card } from "react-bootstrap";

const InformationCallOut = () => (
  <section id="options" className="options centered section-rev">
    <div className="wrapper">
      <div className="options-wrapper acc-item match-height row">
        <Accordion defaultActiveKey="0">
          <Card style={{ paddingBottom: "0px", margin: "0px", float: "left", width: "25%"}}>
              <Accordion.Toggle
                variant="link"
                eventKey="0"
                as={Card.Header}
                style={{ border: "none", width: "100%" , padding: "0px"}}
              >
                <div
                  className="option one-quarter pull-left height"
                  style={{ width: "100%", height: "172px" }}
                >
                  <a
                    className="acc-title"
                    href="#accordion-3"
                    style={{ width: "100%" }}
                  >
                    <div className="option-container">
                      <i
                        className="fa fa-check-circle-o icon"
                        aria-hidden="true"
                      ></i>
                      <h3>Admissions</h3>
                      <i className="fa fa-plus" aria-hidden="true"></i>
                    </div>
                  </a>
                </div>
              </Accordion.Toggle>
          </Card>
          <Card style={{ paddingBottom: "0px", margin: "0px", float: "left", width: "25%" }}>
            <Card.Header>
              <Accordion.Toggle
                variant="link"
                eventKey="0"
                style={{ border: "none", width: "100%" , padding: "0px" , borderLeft: "1px solid #6e7a8c"}}
              >
                <div
                  className="option one-quarter pull-left height"
                  style={{ width: "100%", height: "172px" }}
                >
                  <a
                    className="acc-title"
                    href="#accordion-3"
                    style={{ width: "100%" }}
                  >
                    <div className="option-container">
                      <i className="fa fa-calendar icon" aria-hidden="true"></i>
                      <h3>Program Description</h3>
                      <i className="fa fa-plus" aria-hidden="true"></i>
                    </div>
                  </a>
                </div>
              </Accordion.Toggle>
            </Card.Header>
          </Card>
          <Card style={{ paddingBottom: "0px", margin: "0px", float: "left", width: "25%"}}>
            <Card.Header>
              <Accordion.Toggle
                variant="link"
                eventKey="0"
                style={{ border: "none", width: "100%" , padding: "0px", borderLeft: "1px solid #6e7a8c"}}
              >
                <div
                  className="option one-quarter pull-left height"
                  style={{ width: "100%", height: "172px" }}
                >
                  <a
                    className="acc-title"
                    href="#accordion-3"
                    style={{ width: "100%" }}
                  >
                    <div className="option-container">
                      <i className="fa fa-users icon" aria-hidden="true"></i>
                      <h3>Faculty and Residents</h3>
                      <i className="fa fa-plus" aria-hidden="true"></i>
                    </div>
                  </a>
                </div>
              </Accordion.Toggle>
            </Card.Header>
          </Card>
          <Card style={{ paddingBottom: "0px", margin: "0px", float: "left", width: "25%"}}>
            <Card.Header>
              <Accordion.Toggle
                variant="link"
                eventKey="0"
                style={{ border: "none", width: "100%" , padding: "0px", borderLeft: "1px solid #6e7a8c"}}
              >
                <div
                  className="option one-quarter pull-left height"
                  style={{ width: "100%", height: "172px" }}
                >
                  <a
                    className="acc-title"
                    href="#accordion-3"
                    style={{ width: "100%" }}
                  >
                    <div className="option-container">
                      <i className="fa fa-trophy icon" aria-hidden="true"></i>
                      <h3>Accreditations</h3>
                      <i className="fa fa-plus" aria-hidden="true"></i>
                    </div>
                  </a>
                </div>
              </Accordion.Toggle>
            </Card.Header>
          </Card>
        </Accordion>
      </div>
    </div>
    <style jsx>
      {`
        button {
          border: none;
        }
      `}
    </style>
  </section>
);
export default InformationCallOut;