import { Meta, Story, Canvas, ArgsTable } from '@storybook/blocks';
import { productMock, productWithBadgesMock } from '../../../../mocks/home/products';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import Tile from '../Tile';
import Grid from '../../grid/Grid';
import * as TileStories from './Tile.stories';

<Meta of={TileStories} />

# 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 of={TileStories.Default} />
</Canvas>

### With placeholder image

<Canvas>
  <Story of={TileStories.WithPlaceholderImage} />
</Canvas>

### With badges

<Canvas>
  <Story of={TileStories.WithBadges} />
</Canvas>

### With settings

<Canvas>
  <Story of={TileStories.WithSettings} />
</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} />
