## Feature Examples

### Structure
- description: The component consists of two labels accompanied by a location icon:\ - \`mainLabel\` - use it to display a main keywords for search suggestions;\ - \`secondaryLabel\` - use it for secondary address data, such as country or region.
- example:
```jsx
<AddressInputItem mainLabel="Main Label" secondaryLabel="Secondary Label" />;
```

### States
- description: Control the state of a component with:\ - \`highlighted\` - use it to mark a suggested value\ - \`selected\` use it to mark an active selection\ - \`disabled\` - use it to mark an unavailable item
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AddressInputItem mainLabel="Highlighted" highlighted />
  <AddressInputItem mainLabel="Selected" selected />
  <AddressInputItem mainLabel="Disabled" disabled />
</StorybookComponents.Stack>;
```

### Layout
- description: Control option layout with optionLayout prop. It supports 2 values:\ - \`single-line\` (default) - use in all common cases\ - \`double-line\` - use for addresses that display more data (include country, region, post code and more)
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AddressInputItem
    mainLabel="Single Line"
    secondaryLabel="Layout"
    optionLayout="single-line"
  />
  <AddressInputItem
    mainLabel="Double Line"
    secondaryLabel="Layout"
    optionLayout="double-line"
  />
</StorybookComponents.Stack>;
```

### Affix
- description: Support option value with additional information added to \`prefix\` and \`suffix\` props. Props accept text, icons and even badges.\ \ \`prefix\` area by default is filled with a location icon to indicate that this is an address list item.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <AddressInputItem
    mainLabel="Address"
    secondaryLabel="With a default layout"
  />
  <AddressInputItem
    mainLabel="Address"
    secondaryLabel="With a removed prefix"
    prefix={false}
  />
  <AddressInputItem
    mainLabel="Address"
    secondaryLabel="With a custom prefix and suffix"
    suffix="Suffix"
    prefix={<Icons.Toolbox />}
  />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### List item builders
- description: Use it as a list item to build custom address input suggestions.
- example:
```jsx
() => {
  const options = [
    listItemSectionBuilder({
      id: 'saved-addresses',
      title: 'Saved Addresses',
      type: 'title',
    }),
    addressInputItemBuilder({
      id: 0,
      mainLabel: '2818 Saint Patrick Pl, Helena, 35080',
      secondaryLabel: 'Alabama, USA ',
      prefix: <Icons.Toolbox />,
      suffix: '2km away',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 1,
      mainLabel: '512 4th St NE, Montgomery, 56069',
      secondaryLabel: 'Minnesota, USA',
      prefix: <Icons.Home />,
      suffix: '34km away',
      optionLayout: 'double-line',
    }),
    listItemSectionBuilder({
      id: 'divider',
      type: 'divider',
    }),
    addressInputItemBuilder({
      id: 2,
      mainLabel: '3499  Henry Ford Avenue, Sallisaw, 74955',
      secondaryLabel: 'Oklahoma, USA ',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 3,
      mainLabel: '1382  Goosetown Drive, Newland, 28657',
      secondaryLabel: 'North Carolina, USA',
      optionLayout: 'double-line',
    }),
    addressInputItemBuilder({
      id: 4,
      mainLabel: '2887  Eagle Drive, Flat Rock, 48134',
      secondaryLabel: 'Michigan, USA',
      optionLayout: 'double-line',
    }),
  ];

  return <AddressInput options={options} />;
};
```