import cx from "classnames";
import React from "react";
import { Icon } from "../../Icon";

export type MessageType = "info" | "warning" | "error" | "invalid";

export interface MessageProps
  extends React.HTMLAttributes<HTMLParagraphElement> {
  /** Type of message */
  type?: MessageType;
  /** Additional CSS classes */
  className?: string;
  /** Message content */
  children?: React.ReactNode;
}

const icons: Record<MessageType, string> = {
  info: "info",
  warning: "warning-important",
  error: "error-severe",
  invalid: "error-severe",
};

import type { IconColor } from "../../Icon/Icon";

const colors: Record<MessageType, IconColor> = {
  info: "info",
  warning: "warning",
  error: "danger",
  invalid: "danger",
};

const CLASS_ROOT = "message";

const Message: React.FC<MessageProps> = ({
  className,
  children,
  type = "info",
  ...other
}) => {
  const classes = cx(
    CLASS_ROOT,
    className,
    type === "invalid" && {
      [`${CLASS_ROOT}--invalid`]: type === "invalid",
    },
  );

  return (
    <p className={classes} {...other}>
      {type && (
        <Icon
          name={icons[type]}
          size="medium"
          color={colors[type]}
          className={`${CLASS_ROOT}__icon`}
        />
      )}
      {children}
    </p>
  );
};

Message.displayName = "Message";

export { Message };