import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Testimonial from '../Testimonial';
import { testimonialMock } from '../../../../mocks/product/testimonials';
import * as TestimonialStories from './Testimonial.stories';

export const testimonialList = testimonialMock.results;

<Meta of={TestimonialStories} />

# Testimonial

<br />

## `Testimonials` are used to showcase customer feedback.

<br />

### Default

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

### No image

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