import _JSXStyle from "../styled-jsx.es.js";
import React from 'react';
import klass from '../cssClasses'; // Assuming cssClasses.ts is in src/

var Indicator = function Indicator(_ref) {
  var onClickHandler = _ref.onClickHandler,
    isSelected = _ref.isSelected,
    index = _ref.index,
    label = _ref.label,
    type = _ref.type;
  switch (type) {
    case 'line':
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
        onClick: onClickHandler,
        onKeyDown: onClickHandler,
        value: index,
        key: index,
        role: "button",
        tabIndex: 0,
        "aria-label": "".concat(label, " ").concat(index + 1),
        className: "jsx-110677664" + " " + (klass.DOT(isSelected) || "")
      }), /*#__PURE__*/React.createElement(_JSXStyle, {
        id: "110677664"
      }, ".dot.jsx-110677664{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;width:14px;height:2px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-110677664,.dot.jsx-110677664:hover{opacity:1;}"));
    case 'square':
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
        onClick: onClickHandler,
        onKeyDown: onClickHandler,
        value: index,
        key: index,
        role: "button",
        tabIndex: 0,
        "aria-label": "".concat(label, " ").concat(index + 1),
        className: "jsx-157344968" + " " + (klass.DOT(isSelected) || "")
      }), /*#__PURE__*/React.createElement(_JSXStyle, {
        id: "157344968"
      }, ".dot.jsx-157344968{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-157344968,.dot.jsx-157344968:hover{opacity:1;}"));
    case 'pill':
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
        onClick: onClickHandler,
        onKeyDown: onClickHandler,
        value: index,
        key: index,
        role: "button",
        tabIndex: 0,
        "aria-label": "".concat(label, " ").concat(index + 1),
        className: "jsx-2836895747" + " " + (klass.DOT(isSelected) || "")
      }), /*#__PURE__*/React.createElement(_JSXStyle, {
        id: "2836895747"
      }, ".dot.jsx-2836895747{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:25px;width:20px;height:5px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-2836895747,.dot.jsx-2836895747:hover{opacity:1;}"));
    default:
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
        onClick: onClickHandler,
        onKeyDown: onClickHandler,
        value: index,
        key: index,
        role: "button",
        tabIndex: 0,
        "aria-label": "".concat(label, " ").concat(index + 1),
        className: "jsx-3056554148" + " " + (klass.DOT(isSelected) || "")
      }), /*#__PURE__*/React.createElement(_JSXStyle, {
        id: "3056554148"
      }, ".dot.jsx-3056554148{-webkit-transition:opacity 0.25s ease-in;transition:opacity 0.25s ease-in;opacity:0.3;box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px;}.dot.selected.jsx-3056554148,.dot.jsx-3056554148:hover{opacity:1;}"));
  }
};
export default Indicator;