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

import type { JSXElement } from "@coreai-ds/react-components";
import { useId } from "@coreai-ds/react-components";
import * as React from 'react';
import type { SelectProps } from "@coreai-ds/react-components";
import { Select } from "@coreai-ds/react-components";

export const Controlled = (): JSXElement => {
    const selectId = useId();
    const [value, setValue] = React.useState('Red');
    const onChange: SelectProps['onChange'] = (event, data) => {
        setValue(data.value);
    };
    return (<>
      <label htmlFor={selectId}>Color</label>
      <Select id={selectId} onChange={onChange} value={value}>
        <option>Red</option>
        <option>Green</option>
        <option>Blue</option>
      </Select>
      <button onClick={() => setValue('Blue')}>Select Blue</button>
    </>);
};

export default Controlled;