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

export interface DescriptionProps extends TextProps {
  theme?: THEME;
}

const cn = "Description";

export const Description = (props: DescriptionProps) => {
  const { className, theme: themeProp, ...rest } = props;

  const { theme: themeContext } = useContext(FormGroupContext);
  const theme = themeProp || themeContext;

  return (
    <Text
      className={classNames(bem(cn), bem(cn, { m: theme }), className)}
      {...rest}
    />
  );
};