// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import type { TextareaProps } from "@coreai-ds/react-components";
import { Field } from "@coreai-ds/react-components";
import { Textarea } from "@coreai-ds/react-components";

export const Controlled = (): JSXElement => {
    const [value, setValue] = React.useState('initial value');
    const onChange: TextareaProps['onChange'] = (ev, data) => {
        if (data.value.length <= 50) {
            setValue(data.value);
        }
    };
    return (<Field label="Controlled Textarea limiting the value to 50 characters">
      <Textarea value={value} onChange={onChange}/>
    </Field>);
};

export default Controlled;