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

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

export const Default = () => {
    const id = useId();
    const styles = /* css */ `
      .spin-button-default-example {
        display: flex;
        flex-direction: column;
        max-width: 500px;
      }

      .spin-button-default-example > .spin-button-default-example__label {
        margin-bottom: var(--spacingVerticalXXS);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="spin-button-default-example">
          <Label className="spin-button-default-example__label" htmlFor={id}>
            Default SpinButton
          </Label>
          <SpinButton defaultValue={10} min={0} max={20} id={id}/>
        </div>
      </>);
};

export default Default;