import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { TimeRangeSelector } from './time-range-selector.component';

<Meta
  title="Components/Navigation/TimeRangeSelector"
  component={TimeRangeSelector}
/>

# TimeRangeSelector

This is the time range switching component for account history graphs.

- `options` – array of objects whose keys include `label` and `value`
- `value` – the current selected value
- `onChange` - callback function which will be called with a button's value when that button is clicked

```jsx
<TimeRangeSelector
  options={[
    { value: 'm1', label: '1 month' },
    { value: 'm6', label: '6 months' },
    {
      value: 'y1',
      label: <FormattedMessage id="path:to:localized:string" />,
    },
  ]}
  value={value}
  onChange={setValue}
/>
```

## Normal

<Canvas>
  <Story id="components-navigation-timerangeselector--normal" />
</Canvas>

## Default Selected Value

<Canvas>
  <Story id="components-navigation-timerangeselector--default-selected-value" />
</Canvas>

## Custom Styling

<Canvas>
  <Story id="components-navigation-timerangeselector--custom-styling" />
</Canvas>

## Localized Labels

<Canvas>
  <Story id="components-navigation-timerangeselector--localized-labels" />
</Canvas>