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

import type { JSXElement } from "@coreai-ds/react-components";
import { DropdownButton } from "@coreai-ds/react-components";
import { Option } from "@coreai-ds/react-components";

// `DropdownButton` renders a `Dropdown` with a button-style trigger and a
// required inline `label`.
const sortOptions = ['Newest', 'Oldest', 'Most popular', 'Trending'];

/**
 * With no `value`/`selectedOptions`, `DropdownButton` renders just its
 * `label` (e.g. `Sort by`) instead of a `label: value` pair — it reads like a
 * menu trigger until an option is picked. Pass `clearable` if users should be
 * able to return to this unselected state after choosing a value.
 */
export const Default = (): JSXElement => (<DropdownButton label="Sort by" clearable onOptionSelect={() => undefined}>
    {sortOptions.map((option) => (<Option key={option}>{option}</Option>))}
  </DropdownButton>);

export default Default;