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

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

export const Disabled = () => {
    const instructionsId = React.useId();
    const styles = /* css */ `
      .file-upload-disabled-example {
        display: flex;
        flex-direction: column;
        max-width: 720px;
        padding: var(--spacingHorizontalL);
        row-gap: var(--spacingVerticalL);
      }
    `;
    return (<>
        <style>{styles}</style>
        <FileUpload className="file-upload-disabled-example" ariaDescribedBy={instructionsId} ariaLabel="File upload unavailable" disabled>
          <Text foreground="disabled" preset="body">
            File upload is unavailable
          </Text>
          <Text id={instructionsId} foreground="disabled" preset="bodyS">
            Contact your administrator for access.
          </Text>
        </FileUpload>
      </>);
};

export default Disabled;