import { Meta, Story, Props } from '@storybook/addon-docs'
import { FeaturesCarousel } from './FeaturesCarousel.tsx';
import { featuresCarouselData } from './fixtureData.json';

<Meta
  title="Typescript Component/FeaturesCarousel"
  component={FeaturesCarousel}
/>

# FeaturesCarousel component
The `FeaturesCarousel` component displays your hierarchical position on the website.

This takes in a `data` prop, as below, to display the links in their order within the data object.

## Props
<Props of={FeaturesCarousel} />

## Code Example
`<FeaturesCarousel />`

An example of the `data` structure can be found in the 'Controls' section on the 'Canvas' tab, where you can customise the data being fed to the Breadcrumb component.

## View Component
Please click the 'Canvas' tab for a better viewing experience, where you can update the props and review at the different breakpoints by clicking the preview icon and selecting from our list of pre-defined breakpoints (XS, SM, MD, LG and XL).

export const FeaturesCarouselStory = ({ featuresCarouselData }) => (
  <FeaturesCarousel heading={featuresCarouselData.heading} carouselItems={featuresCarouselData.carouselItems} hideHeading={featuresCarouselData.hideHeading} />
);

<Story name="FeaturesCarousel" args={{ featuresCarouselData }}>
  {FeaturesCarouselStory.bind({})}
</Story>