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

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

export const Info = (): JSXElement => (<Field label={{
        // Setting children to a render function allows you to replace the entire slot.
        // The first param is the component for the slot (Label), which we're ignoring to use InfoLabel instead.
        // The second param are the props for the slot, which need to be passed to the InfoLabel.
        children: (_: unknown, slotProps: LabelProps) => (<InfoLabel {...slotProps} info="Example info">
          Field with an info button
        </InfoLabel>),
    }}>
    <Input />
  </Field>);

export default Info;