import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { TitleProps as HuTitleProps } from '@material-hu/components/design-system/Title/types';

type HelperTextProps = {
  title: string;
  fontWeight?: HuTitleProps['fontWeight'];
};

const HelperText = ({
  title,
  fontWeight = 'fontWeightRegular',
}: HelperTextProps) => {
  const theme = useTheme();
  return (
    <Typography
      variant="globalXS"
      sx={{ color: theme.palette.new.text.neutral.lighter, mt: 1.5 }}
      component="p"
      fontWeight={fontWeight}
    >
      {title}
    </Typography>
  );
};

export default HelperText;
