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

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

const shapes = ['rounded', 'circular', 'square'] as const;

const sortOptions = ['Newest', 'Oldest', 'Most popular', 'Trending'];

export const Shape = () => {
    const [sort, setSort] = React.useState('Newest');
    const styles = /* css */ `
    .dropdown-button-shape-example {
      display: flex;
      flex-direction: column;
      column-gap: var(--spacingHorizontalXXL);
      row-gap: var(--spacingVerticalL);
      align-items: flex-start;
      padding: var(--spacingVerticalL);
    }

    .dropdown-button-shape-example__column {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacingVerticalS);
      align-items: flex-start;
    }

    .dropdown-button-shape-example__heading {
      margin: 0;
      font-size: var(--fontSizeBase200);
      color: var(--colorNeutralForeground3);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="dropdown-button-shape-example">
        {shapes.map((shape) => (<div key={shape} className="dropdown-button-shape-example__column">
            <p className="dropdown-button-shape-example__heading">{shape}</p>
            <DropdownButton shape={shape} label="Sort by" value={sort} selectedOptions={[sort]} onOptionSelect={(_event, data) => setSort(data.optionValue ?? sort)}>
              {sortOptions.map((option) => (<Option key={option}>{option}</Option>))}
            </DropdownButton>
          </div>))}
      </div>
    </>);
};

export default Shape;