/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import Typography from "../Typography";
import Link from "../Link";
import Warning from "../Icon/Warning";
import getClasses from "./styles";
import useTheme from "../styles/useTheme";
import { getColorsLabels } from "../styles/colors";
import CssFlex from "../CssFlex";
var colorsList = getColorsLabels(true);

var AlertCard = function AlertCard(props) {
  var color = props.color,
      text = props.text,
      action = props.action,
      linkText = props.linkText,
      className = props.className;
  var classes = getClasses({
    color: color
  });

  var _useTheme = useTheme(),
      colors = _useTheme.cleverUI.colors;

  return /*#__PURE__*/React.createElement(CssFlex, {
    className: classnames(classes.card, className),
    alignItems: "center",
    gap: "xs"
  }, /*#__PURE__*/React.createElement(Warning, {
    size: 20,
    color: color,
    shade: colors[color][700] ? 700 : 500
  }), /*#__PURE__*/React.createElement(Typography, {
    color: color,
    shade: colors[color][700] ? 700 : 500,
    variant: "body0"
  }, text, !!linkText && /*#__PURE__*/React.createElement(React.Fragment, null, " ", /*#__PURE__*/React.createElement(Link, {
    onClick: action,
    className: classes.link,
    color: color
  }, linkText))));
};

AlertCard.propTypes = {
  color: PropTypes.oneOf(colorsList),
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Object)]),
  className: PropTypes.string,
  action: PropTypes.func,
  linkText: PropTypes.string
};
AlertCard.defaultProps = {
  color: "primary",
  text: "",
  className: "",
  action: function action() {},
  linkText: ""
};
export default AlertCard;