import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Star } from '@useblu/ocean-icons-react';
import CrossSellCard from '../CrossSellCard';
import emptyImage from '../img/empty-image.svg';

<Meta title="Components/CrossSellCard" component={CrossSellCard} />

# CrossSellCard APIs

The API documentation of the CrossSellCard React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { CrossSellCard } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <CrossSellCard
      title="Card Title"
      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      ctaText="Call To Action"
      imageSrc={emptyImage}
      ctaAction={() => console.log('clicked')}
    />
  </Story>
</Canvas>

## CSS

| Global class                        | Description                                              |
| ----------------------------------- | -------------------------------------------------------- |
| .ods-cross-sell-card                | Styles applied to the root element.                      |
| .ods-cross-sell-card\_\_content     | Styles applied to the content element.                   |
| .ods-cross-sell-card\_\_information | Styles applied to the heading and description container. |
| .ods-cross-sell-card\_\_image       | Styles applied to the image element.                     |
| .ods-cross-sell-card\_\_description | Styles applied to the description element.               |
| .ods-cross-sell-card\_\_cta         | Styles applied to the cta/button element.                |
| .ods-cross-sell-card\_\_cta-icon    | Styles applied to the cta/button icon element.           |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/CrossSellCard/CrossSellCard.tsx) for more detail.

## Playground

<Canvas>
  <Story
    name="playground"
    args={{
      title: 'Card Title',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
      imageSrc: emptyImage,
      ctaText: 'Call To Action',
    }}
  >
    {(props) => <CrossSellCard {...props} />}
  </Story>
</Canvas>
