import React, { useState } from "react";

import addNewObject from "@cloudbees/honeyui-icons/svg/add_new_object.svg";
import altRoute from "@cloudbees/honeyui-icons/svg/alt_route.svg";
import arrowRight from "@cloudbees/honeyui-icons/svg/arrow_right.svg";
import autoRefresh from "@cloudbees/honeyui-icons/svg/auto_refresh.svg";
import calendar from "@cloudbees/honeyui-icons/svg/calendar.svg";
import detailsArrow from "@cloudbees/honeyui-icons/svg/details_arrow.svg";
import devopsInsightDashboards from "@cloudbees/honeyui-icons/svg/devops_insight_dashboards.svg";
import dsl from "@cloudbees/honeyui-icons/svg/dsl.svg";
import duration from "@cloudbees/honeyui-icons/svg/duration.svg";
import east from "@cloudbees/honeyui-icons/svg/east.svg";
import editDashboard from "@cloudbees/honeyui-icons/svg/edit_dashboard.svg";
import emailNotification from "@cloudbees/honeyui-icons/svg/email_notification.svg";
import errorTriangle from "@cloudbees/honeyui-icons/svg/error_triangle.svg";
import expandRow from "@cloudbees/honeyui-icons/svg/expand_row.svg";
import exportIcon from "@cloudbees/honeyui-icons/svg/export.svg";
import favoriteStar from "@cloudbees/honeyui-icons/svg/favorite_star.svg";
import favoriteUnselected from "@cloudbees/honeyui-icons/svg/favorite_unselected.svg";
import filterFunnel from "@cloudbees/honeyui-icons/svg/filter_funnel.svg";
import helpTip from "@cloudbees/honeyui-icons/svg/help_tip.svg";
import importIcon from "@cloudbees/honeyui-icons/svg/import.svg";
import leaveSystem from "@cloudbees/honeyui-icons/svg/leave_system.svg";
import menuBook from "@cloudbees/honeyui-icons/svg/menu_book.svg";
import multiActionButton from "@cloudbees/honeyui-icons/svg/multi_action_button.svg";
import offlineBolt from "@cloudbees/honeyui-icons/svg/offline_bolt.svg";
import paintbrush from "@cloudbees/honeyui-icons/svg/paintbrush.svg";
import panTool from "@cloudbees/honeyui-icons/svg/pan_tool.svg";
import pipelineRuns from "@cloudbees/honeyui-icons/svg/pipeline_runs.svg";
import project from "@cloudbees/honeyui-icons/svg/project.svg";
import release from "@cloudbees/honeyui-icons/svg/release.svg";
import runDeployment from "@cloudbees/honeyui-icons/svg/run_deployment.svg";
import runningInProgress from "@cloudbees/honeyui-icons/svg/running_in_progress.svg";
import snapshot from "@cloudbees/honeyui-icons/svg/snapshot.svg";
import success from "@cloudbees/honeyui-icons/svg/success.svg";
import tag from "@cloudbees/honeyui-icons/svg/tag.svg";
import toggle_off from "@cloudbees/honeyui-icons/svg/toggle_off.svg";
import toggle_on from "@cloudbees/honeyui-icons/svg/toggle_on.svg";
import user from "@cloudbees/honeyui-icons/svg/user.svg";
import views from "@cloudbees/honeyui-icons/svg/views.svg";
import plugin from "@cloudbees/honeyui-icons/svg/plugin.svg";
import helm from "@cloudbees/honeyui-icons/svg/helm.svg";

export const CustomIcons = () => {
  const icons = [
    addNewObject,
    altRoute,
    arrowRight,
    autoRefresh,
    calendar,
    detailsArrow,
    devopsInsightDashboards,
    dsl,
    duration,
    east,
    editDashboard,
    emailNotification,
    errorTriangle,
    expandRow,
    exportIcon,
    favoriteStar,
    favoriteUnselected,
    filterFunnel,
    helpTip,
    importIcon,
    leaveSystem,
    menuBook,
    multiActionButton,
    offlineBolt,
    paintbrush,
    panTool,
    pipelineRuns,
    project,
    release,
    runDeployment,
    runningInProgress,
    snapshot,
    success,
    tag,
    toggle_off,
    toggle_on,
    user,
    views,
    plugin,
    helm
  ];

  return (
    <>
      {icons.map((icon, index) => (
        <span className="d-inline-block m-3" key={index}>
          <svg width={32} viewBox={`${icon.viewBox}`}>
            <use xlinkHref={`#${icon.id}`} />
          </svg>
        </span>
      ))}
    </>
  );
};
