/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */
import React from 'react';
import './styles.scss';
import { DonutSegments } from './components/donut_segments';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const DONUT_TEST_ID = 'donut';
export const DONUT_ICON_TEST_ID = 'donut-icon';
export const DONUT_TORUS_TEST_ID = 'donut-torus';
export const Donut = _ref => {
  let segments = _ref.segments,
    iconSize = _ref.iconSize,
    diameter = _ref.diameter,
    fill = _ref.fill,
    stroke = _ref.stroke,
    isInverted = _ref.isInverted,
    children = _ref.children;
  return /*#__PURE__*/_jsxs("div", {
    "data-test-subj": DONUT_TEST_ID,
    className: "celDonut",
    style: {
      width: diameter,
      height: diameter
    },
    children: [/*#__PURE__*/_jsx("svg", {
      "data-test-subj": DONUT_TORUS_TEST_ID,
      width: diameter,
      height: diameter,
      viewBox: "0 0 ".concat(diameter, " ").concat(diameter),
      children: /*#__PURE__*/_jsx(DonutSegments, {
        diameter: diameter,
        segments: segments,
        fill: fill,
        stroke: stroke
      })
    }), children && /*#__PURE__*/_jsx("div", {
      "data-test-subj": DONUT_ICON_TEST_ID,
      className: "celDonutIcon ".concat(isInverted ? 'celDonutInverted' : ''),
      style: {
        width: iconSize,
        height: iconSize
      },
      children: children
    })]
  });
};