import React from "react";

import { Button, Icon } from "../../";

import ArrowRightIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/regular/arrow-alt-circle-right.svg";
import ArrowLeftIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/regular/arrow-alt-circle-left.svg";

export default (
  <>
    <div className="m-5">
      <Button className="mr-2">
        <Icon
          id={ArrowRightIcon.id}
          viewBox={ArrowRightIcon.viewBox}
          size="sm"
          className="mr-2"
          currentColor={true}
        />
        Primary
      </Button>
      <Button variant="secondary">
        Secondary
        <Icon
          id={ArrowLeftIcon.id}
          viewBox={ArrowLeftIcon.viewBox}
          size="sm"
          className="ml-2"
          currentColor={true}
        />
      </Button>
    </div>

    <div className="m-5">
      <Button variant="outline-primary" className="mr-2">
        <Icon id={ArrowRightIcon.id} viewBox={ArrowRightIcon.viewBox} size="sm" className="mr-2" />
        Primary
      </Button>
      <Button variant="outline-secondary">
        Secondary
        <Icon id={ArrowLeftIcon.id} viewBox={ArrowLeftIcon.viewBox} size="sm" className="ml-2" />
      </Button>
    </div>
  </>
);