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

import * as React from 'react';
import { Input } from "@coreai-ds/react-components";

export const InlineLabel = () => {
    const [name, setName] = React.useState<string>('');
    const styles = /* css */ `
      .input-inline-label-example {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: var(--spacingVerticalL);
        max-width: 320px;
        padding: var(--spacingVerticalL);
      }

      .input-inline-label-example__field {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: var(--spacingVerticalXS);
      }

      .input-inline-label-example__prop-label {
        font-family: var(--fontFamilyMonospace);
        font-size: var(--fontSizeBase200);
        color: var(--colorNeutralForeground3);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="input-inline-label-example">
          <div className="input-inline-label-example__field">
            <code className="input-inline-label-example__prop-label">label</code>
            <Input label="Name" placeholder="Enter a name" value={name} onChange={(_event, data) => setName(data.value)}/>
          </div>

          <div className="input-inline-label-example__field">
            <code className="input-inline-label-example__prop-label">label, dynamicWidth</code>
            <Input label="Name" dynamicWidth placeholder="Enter a name"/>
          </div>
        </div>
      </>);
};

export default InlineLabel;