import React, { useContext } from "react";
import classNames from "classnames";
import { FormGroupContext } from "../FormGroup/FormGroupContext";
import { Text, TextProps } from "../Text";
import { STATUS_VARIANT } from "../../types";
import { bem } from "../../utilities";

const cn = "InputFeedback";

interface InputFeedbackProps extends TextProps {
  variant?: STATUS_VARIANT;
}

export const InputFeedback = (props: InputFeedbackProps) => {
  const {
    variant: variantProp = STATUS_VARIANT.DEFAULT,
    className,
    ...rest
  } = props;
  const { variant: variantContext } = useContext(FormGroupContext);

  const variant = variantContext || variantProp;

  const classes = classNames(bem(cn), bem(cn, { m: variant }), className);

  return <Text className={classes} {...rest} />;
};