import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Testimonial from '../Testimonial';
import { testimonialMock } from '../../../../mocks/product/testimonials';

export const testimonialList = testimonialMock.results;

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

# Testimonial
<br />

## `Testimonials` are used to showcase customer feedback.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Testimonial {...testimonialList[0]} />
    </Story>
</Canvas>

### No image
<Canvas>
    <Story name="No image">
        <Testimonial {...testimonialList[1]} />
    </Story>
</Canvas>

## Usage Example
```jsx
import Testimonial from '@appdirect/sfb-theme-components/src/atoms/testimonial/Testimonial'

<Testimonial
    author={'Amy E. Hood'}
    job={'Microsoft CFO'}
    testimonial={'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'}
    iconUrl={'https://d3bql97l1ytoxn.cloudfront.net/app_resources/577/thumbs_64/img8352473687030874440.png'}
    iconSrcset={{
        default: 'https://d3bql97l1ytoxn.cloudfront.net/app_resources/577/thumbs_64/img8352473687030874440.png',
        '2x': 'https://d3bql97l1ytoxn.cloudfront.net/app_resources/577/thumbs_64/img8352473687030874440-2x.png',
        '1x': 'https://d3bql97l1ytoxn.cloudfront.net/app_resources/577/thumbs_64/img8352473687030874440.png'
    }}
    iconAlt={'Microsoft'}
/>
```

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