import React from "react";
import hourglass_bottom from "@cloudbees/honeyui-icons/svg/hourglass_bottom.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-1"></hr>
          <div className="row">
            <div className="col p-2">
              <h4 className="text-primary">Primary</h4>
              <p>
                Primary is used for most icons. On light backgrounds, the primary blue is used to
                indicate that an icon is actionable.
              </p>
              <h4 className="text-success">Success</h4>
              <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>
              <h4 className="text-warningy">Warning</h4>
              <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>
              <h4 className="text-danger">Danger</h4>
              <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>
              <h4>Disabled</h4>
              <p>
                Disabled is used when a user cannot interact with an icon until other criteria are
                met.
              </p>
              <h4>Dark</h4>
              <p>Dark icons are used for non-actionable icons that exist on light backgrounds.</p>
              <h4>White</h4>
              <p>
                White icons can be used for actionable or non-actionable icons that exist on dark
                backgrounds.
              </p>
              <div className="pt-1">
                <div className="row">
                  {colors.map((color, idx) => {
                    const bg = color.indexOf("white") > -1 ? "bg-dark" : "";

                    return (
                      <div key={idx} className={`col-3 my-5 ${bg}`}>
                        <div style={{ height: 100 }} className={color}>
                          <svg width={64} viewBox={`${hourglass_bottom.viewBox}`}>
                            <use xlinkHref={`#${hourglass_bottom.id}`} />
                          </svg>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
