import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import { getKnobs } from '../../../tools/knobsHelper';
import { productMock, productWithBadgesMock, productMockWithoutIcon } from '../../../../mocks/home/products';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import Tile from '../Tile';
import Grid from '../../grid/Grid';

<Meta title="Atoms/Tile" component={Tile} />

# Tile
<br />

## `Tiles` can be used to provide a quick overview of a product.
## They contains various props that can be customized based on your needs.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Grid maxCol={4}>
            <Tile data={productMock} />
        </Grid>
    </Story>
</Canvas>

### With placeholder image
<Canvas>
    <Story name="With placeholder image">
        <Grid maxCol={4}>
            <Tile data={productMockWithoutIcon} />
        </Grid>
    </Story>
</Canvas>

### With badges
<Canvas>
    <Story name="With badges">
        <Grid maxCol={6}>
            <Tile data={productWithBadgesMock} />
        </Grid>
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <Grid maxCol={4}>
            <Tile data={productWithBadgesMock} settings={getKnobs(Tile.schema().form)} />
        </Grid>
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="defaultTileProps"
    code={productWithBadgesMock}
/>


```jsx
import Tile from '@appdirect/sfb-theme-components/src/atoms/tile/Tile'

<Tile data={defaultTileProps} />

```

## Props
<ArgsTable of={Tile} />
