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

<Meta title="Atoms/Feature Card" component={FeatureCard} />

# FeatureCard
<br />

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

### Default
<Canvas>
    <Story name="Default">
        <div style={{ width: 300 }}>
            <FeatureCard {...featureCardWithImageMock} />
        </div>
    </Story>
</Canvas>

### Small image
<Canvas>
    <Story name="With small image">
        <div style={{ width: 300 }}>
            <FeatureCard {...featureCardWithImageMock} imageSize="small" />
        </div>
    </Story>
</Canvas>

### Without image
<Canvas>
    <Story name="Without image">
        <div style={{ width: 300 }}>
            <FeatureCard {...featureCardMock} />
        </div>
    </Story>
</Canvas>

### With global title's variable
<Canvas>
    <Story name="With heading">
        <div style={{ width: 300, '--titleText': 'red' }}>
            <FeatureCard {...featureCardMock} withHeading />
        </div>
    </Story>
</Canvas>

### With HTML in the description
<Canvas>
    <Story name="With HTML in the description">
        <div style={{ width: 300 }}>
            <FeatureCard {...featureCardWithHTMLinDescription} />
        </div>
    </Story>
</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} />
