import React from "react";
import contactMail from "@cloudbees/honeyui-icons/svg/contact_mail.svg";

const colors = [
  "text-primary",
  "text-success",
  "text-warning",
  "text-danger",
  "text-secondary",
  "text-dark",
  "text-white"
];

export default () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <p className="lead">Add to the communication of an icon by using a status color.</p>
          <hr className="pb-3"></hr>
          <div className="row">
            <div className="col p-2">
              <h2>Primary</h2>
              <p>
                Primary is used for most icons. On light backgrounds, the primary blue is used to
                indicate that an icon is actionable.
              </p>
              <h2>Success</h2>
              <p>
                Primary green is used to show that an action has been successful. Examples might
                include a checkmark that shows something has been successful and completed.
              </p>
              <h2>Warning</h2>
              <p>
                Primary yellow is used to show that an action is not yet successful. Examples might
                include a warning icon to represent that something needs review, but is still
                active.
              </p>
              <h2>Danger</h2>
              <p>
                Primary red is used to show that an action has failed. Examples may include an “x”
                icon representing that something had failed and is no longer active.
              </p>
              <h2>Disabled</h2>
              <p>
                Disabled is used when a user cannot interact with an icon until other criteria are
                met.
              </p>
              <h2>Dark</h2>
              <p>Dark icons are used for non-actionable icons that exist on light backgrounds.</p>
              <h2>White</h2>
              <p>
                White icons can be used for actionable or non-actionable icons that exist on dark
                backgrounds.
              </p>
              <div className="pt-3">
                <div className="row my-5">
                  {colors.map((color) => {
                    const bg = color.indexOf("white") > -1 ? "bg-dark" : "";
                    return (
                      <div className={`col-3 my-5 ${bg}`}>
                        <div style={{ height: 100 }} className={color}>
                          <svg width={30} viewBox={`${contactMail.viewBox}`}>
                            <use xlinkHref={`#${contactMail.id}`} />
                          </svg>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
