import React from "react";
import PropTypes from "prop-types";
import { makeStyles, useTheme } from "@mui/styles";
const useStyles = makeStyles(theme => {
  return {
    box: {
      position: "relative",
      width: 16,
      height: 16,
      border: "1px solid lightgray",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      zIndex: 2,
      "&:hover": {
        backgroundColor: "rgba(0, 0, 0, 0.1)"
      },
      "& svg": {
        margin: 2
      }
    },
    radio: {
      borderRadius: "50%"
    },
    innerCircle: {
      position: "absolute",
      borderRadius: "50%",
      width: 12,
      height: 12,
      backgroundColor: theme.palette.secondary.main
    }
  };
});
function InputIcon(_ref) {
  let {
    checked = false,
    type = "checkbox",
    "data-cy": dataCy
  } = _ref;
  const classes = useStyles();
  const theme = useTheme();
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(classes.box).concat(type === "radio" ? " ".concat(classes.radio) : ""),
    "data-cy": dataCy
  }, checked && type === "checkbox" && /*#__PURE__*/React.createElement("svg", {
    width: "13.707",
    height: "10.051",
    viewBox: "0 0 3.627 2.659",
    "data-testid": "input-icon-tick"
  }, /*#__PURE__*/React.createElement("path", {
    fill: theme.palette.secondary.main,
    fillRule: "evenodd",
    d: "m43.353 31.363-9 8.99-.353.354-.353-.354-4-4 .707-.707L34 39.293l8.647-8.637z",
    clipRule: "evenodd",
    transform: "matrix(.26458 0 0 .26458 -7.844 -8.111)"
  })), checked && type === "radio" && /*#__PURE__*/React.createElement("div", {
    className: classes.innerCircle,
    "data-testid": "input-icon-radio"
  }));
}
InputIcon.propTypes = {
  checked: PropTypes.bool,
  type: PropTypes.oneOf(["checkbox", "radio"]),
  "data-cy": PropTypes.string
};
export default InputIcon;
//# sourceMappingURL=InputIcon.js.map