import { ExclamationTriangle } from "react-bootstrap-icons";
const MobileContent = ({ isDashboard }) => {
  const copy = isDashboard ? (
    <>
      <div>
        <p className="mobile-text-dashboard">
          Novodraft is a desktop application. The functionailty of your
          Dashboard in mobile mode is limited to displaying stats and important
          notifications.
        </p>
        <p className="mobile-text-dashboard">
          Please login on your desktop device to use all of the features of your
          Dashboard.
        </p>
      </div>
    </>
  ) : (
    "Novodraft is a desktop application. Please login on your desktop device to use this feature."
  );

  return (
    <>
      <div className="mobile-content-container">
        {!isDashboard ? (
          <>
            <div className="mobile-divider"></div>
            <div className="features-top-mobile-img">
              <img
                className="features-image-one"
                src="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/79eafada-1517-43a6-99f1-d3e2b0da8200/public"
              />
            </div>
          </>
        ) : (
          <>
            <div>
              <div className="notication-container">
                <strong>Notification Center</strong>
                <div className="notication-text-container">
                  <p>
                    <ExclamationTriangle
                      style={{ color: "red", marginBottom: "5px" }}
                    />
                  </p>
                  <p className="notification-text">No new notifications</p>
                </div>
              </div>
            </div>
          </>
        )}
        <div className="lower-foo">
          {isDashboard ? (
            <>
              <div className="mobile-divider"></div>
              <div className="mobile-info-heading-dashboard">{copy}</div>
              <div className="mobile-divider"></div>
            </>
          ) : (
            <div className="mobile-info-heading">{copy}</div>
          )}
        </div>
      </div>
    </>
  );
};

export default MobileContent;