import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import PropTypes from 'prop-types';
import ContentDropdown from '../ContentDropdown';
import * as ContentDropdownStories from './ContentDropdown.stories';

export const ContentTemplate = ({ content }) => (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div>
            <h2 style={{ margin: '0 0 8px 0' }}>{content}</h2>
            <p style={{ margin: 0, fontWeight: 'lighter' }}>Other details</p>
        </div>
        <div>
            <h3 style={{ margin: 0 }}>Starting at $999.99</h3>
        </div>
    </div>
);

export const items = [
    {
        id: 'item-1',
        content: <ContentTemplate content="iPhone 13 mini" />
    },
    {
        id: 'item-2',
        content: <ContentTemplate content="iPhone 13" />
    },
    {
        id: 'item-3',
        content: <ContentTemplate content="iPhone 13 plus ultra" />
    }
];

<Meta of={ContentDropdownStories} />

# ContentDropdown

<br />

## `ContentDropdowns` are used to display content in a dropdown like layout.

<br />

### Default

<Canvas>
  <Story of={ContentDropdownStories.Default} />
</Canvas>

### With selected item

<Canvas>
  <Story of={ContentDropdownStories.WithSelectedItem} />
</Canvas>

### With disabled item

<Canvas>
  <Story of={ContentDropdownStories.WithDisabledItems} />
</Canvas>

### With selected content override

<Canvas>
  <Story of={ContentDropdownStories.WithSelectedContentOverride} />
</Canvas>

### With initiallyOpen set to false

<Canvas>
  <Story of={ContentDropdownStories.WithInitiallyOpenSetToFalse} />
</Canvas>

### With non node values

<Canvas>
  <Story of={ContentDropdownStories.WithNonNodeValues} />
</Canvas>

## Usage Example

```jsx
import ContentDropdown from '@appdirect/sfb-theme-components/src/atoms/content-dropdown/ContentDropdown';

<ContentDropdown
    label="Dropdown label"
    items={[
        {
            id: 'item-1',
            content: <h1>Item 1</h1>
        },
        {
            id: 'item-2',
            content: <h1>Item 2</h1>
        }
    ]}
    selectedItemId="item-2"
    initiallyOpen={false}
/>

```

## Props

<ArgsTable of={ContentDropdown} />
