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

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

export const Default = () => {
    const dropdownId = useId('dropdown-default');
    const options = [
        'Cat',
        'Caterpillar',
        'Corgi',
        'Chupacabra',
        'Dog',
        'Ferret',
        'Fish',
        'Fox',
        'Hamster',
        'Snake',
    ];
    const styles = /* css */ `
      .dropdown-default-example {
        display: grid;
        grid-template-rows: repeat(1fr);
        justify-items: start;
        gap: var(--spacingVerticalXXS);
        max-width: 400px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="dropdown-default-example">
          <label htmlFor={dropdownId}>Best pet</label>
          <Dropdown id={dropdownId} placeholder="Select an animal">
            {options.map((option) => (<Option key={option} disabled={option === 'Ferret'}>
                {option}
              </Option>))}
          </Dropdown>
        </div>
      </>);
};

export default Default;