// 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 { Label } from "@coreai-ds/react-components";
import { Input } from "@coreai-ds/react-components";
import * as React from 'react';

export const Inline = (): JSXElement => {
    const inputId = useId('input');
    return (<div>
      <Label htmlFor={inputId} style={{ paddingInlineEnd: '12px' }}>
        Sample inline input
      </Label>
      <Input id={inputId}/>

      <p>
        This input is <Input placeholder="inline" aria-label="inline"/> within a paragraph of text (be sure to provide
        an <code>aria-label</code>).
      </p>
    </div>);
};

export default Inline;