// 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';

// ---------- Appearance ----------
export const Appearance = () => {
    const idPrefix = 'input-appearance-story';
    const inputIds = {
        filledDarker: useId(idPrefix),
        outline: useId(idPrefix),
        underline: useId(idPrefix),
        filledLighter: useId(idPrefix),
    };
    const styles = /* css */ `
    .input-appearance-example {
      display: flex;
      flex-direction: column;
      max-width: 400px;
    }

    .input-appearance-example__field {
      display: grid;
      row-gap: var(--spacingVerticalXXS);
      margin-top: var(--spacingVerticalL);
    }

    .input-appearance-example__field--filled-lighter {
      margin-inline: -48px;
      padding-block: var(--spacingVerticalXXL);
      padding-inline: 48px;
      background-color: var(--colorNeutralBackground3);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="input-appearance-example">
        <div className="input-appearance-example__field">
          <Label htmlFor={inputIds.outline}>Outline appearance</Label>
          <Input appearance="outline" id={inputIds.outline}/>
        </div>
        <div className="input-appearance-example__field">
          <Label htmlFor={inputIds.filledDarker}>Filled darker appearance (CoreAI default)</Label>
          <Input appearance="filled-darker" id={inputIds.filledDarker}/>
        </div>
        <div className="input-appearance-example__field input-appearance-example__field--filled-lighter">
          <Label htmlFor={inputIds.filledLighter}>Filled lighter appearance</Label>
          <Input appearance="filled-lighter" id={inputIds.filledLighter}/>
        </div>
        <div className="input-appearance-example__field">
          <Label htmlFor={inputIds.underline}>Underline appearance</Label>
          <Input appearance="underline" id={inputIds.underline}/>
        </div>
      </div>
    </>);
};

export default Appearance;