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

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 ReadOnly = () => {
    const idPrefix = 'input-readonly-story';
    const inputIds = {
        token: useId(idPrefix),
        editable: useId(idPrefix),
    };
    const styles = /* css */ `
      .input-read-only-example {
        display: flex;
        flex-direction: column;
        max-width: 400px;
      }

      .input-read-only-example__field {
        display: grid;
        row-gap: var(--spacingVerticalXXS);
        margin-top: var(--spacingVerticalL);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="input-read-only-example">
          <div className="input-read-only-example__field">
            <Label htmlFor={inputIds.token}>Read-only (with copy button)</Label>
            <Input readOnly id={inputIds.token} value="sk-9f3c1a7b2e4d6f80"/>
          </div>

          <div className="input-read-only-example__field">
            <Input readOnly label="API key" value="sk-9f3c1a7b2e4d6f80"/>
          </div>

          <div className="input-read-only-example__field">
            <Label htmlFor={inputIds.editable}>Editable (no copy button)</Label>
            <Input id={inputIds.editable} defaultValue="Type to edit me"/>
          </div>
        </div>
      </>);
};

export default ReadOnly;