import React, { FC } from "react";
import cx from 'classnames';
import "./AssistiveText.scss"
import { AssitiveTextProps } from "./types";
import { useLocale } from "../../hooks/useLocale";


export const AssistiveText: FC<AssitiveTextProps> = ({
    focused = false,
    warning = false,
    children,
    style = {}
}) => {

    const label = useLocale(children)

    return (
        <label style={style} data-testid='assistiveText-id' className={cx('assistive-gtc-rc-text', focused && "assistive-gtc-rc-text-focus", warning && 'assistive-gtc-rc-text-error')}>
            {label}
        </label>
    )
}
