import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { featureCardMock, featureCardWithImageMock, featureCardWithHTMLinDescription } from '../../../../mocks/product/top-features';
import FeatureCard from '../FeatureCard';
import * as FeatureCardStories from './FeatureCard.stories';

<Meta of={FeatureCardStories} />

# FeatureCard

<br />

## `FeatureCards` are used to display a feature card with title, description and image.

<br />

### Default

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

### Small image

<Canvas>
  <Story of={FeatureCardStories.WithSmallImage} />
</Canvas>

### Without image

<Canvas>
  <Story of={FeatureCardStories.WithoutImage} />
</Canvas>

### With global title's variable

<Canvas>
  <Story of={FeatureCardStories.WithHeading} />
</Canvas>

### With HTML in the description

<Canvas>
  <Story of={FeatureCardStories.WithHtmlInTheDescription} />
</Canvas>

## Usage Example

```jsx
import FeatureCard from '@appdirect/sfb-theme-components/src/atoms/feature-card/FeatureCard';

<FeatureCard
    title="Title"
    description="Description"
    image={{
        alt: 'Lorem Ipsum',
        url: 'https://via.placeholder.com/100',
        urlSrcset: {
            default: 'https://via.placeholder.com/100',
            '2x': 'https://via.placeholder.com/200'
        }
    }}
    imageSize="small"
    withHeading
/>
```

## Props

<ArgsTable of={FeatureCard} />
