import { Meta, Source, Canvas, Controls, Stories } from '@storybook/addon-docs/blocks';
import * as CardStories from './card.stories.json';
import templateSource from './card.twig?raw';

<Meta of={CardStories} name="Docs" />

# Card

A flexible Bootstrap card with four image layout orientations (top, bottom, left, right), optional body padding, background themes, shadow control, and an optional CTA button or full-card link.

- `orientation` controls image placement — horizontal layouts (`image-left`, `image-right`) use a two-column row structure
- `content_vertical` only affects horizontal layouts — controls how content is aligned vertically within its column
- If `url` and `button_label` are both provided, a button is shown; if only `url` is provided, the whole card becomes a stretched link
- Heading is always rendered as `<h3>` — use semantic heading level in the surrounding layout as needed

> ### Bootstrap documentation
> - [Cards](https://getbootstrap.com/docs/5.3/components/card/)
> - [Stretched link](https://getbootstrap.com/docs/5.3/helpers/stretched-link/)
> - [Shadows](https://getbootstrap.com/docs/5.3/utilities/shadows/)

## Properties

<Canvas of={CardStories.Default} />
<Controls of={CardStories.Default} />

## Stories

<Stories of={CardStories} />

## Example

### Example #1 : Default card with image top

```twig
{{ include('vartheme_bs5_educare:card', {
  orientation: 'image-top',
  heading_text: 'This is your card title',
  text: 'A short description goes here.',
  media: {
    src: '/path/to/image.jpg',
    alt: 'Card image',
    width: 1200,
    height: 900,
  },
  media_ratio: 'ratio-16x9',
  background: 'bg-body',
  shadow: 'shadow',
  has_padding: true,
}, with_context: false) }}
```

### Example #2 : Card with CTA button

```twig
{{ include('vartheme_bs5_educare:card', {
  orientation: 'image-top',
  heading_text: 'Card with button',
  text: 'A short description goes here.',
  media: {
    src: '/path/to/image.jpg',
    alt: 'Card image',
    width: 1200,
    height: 900,
  },
  media_ratio: 'ratio-16x9',
  background: 'bg-body',
  shadow: 'shadow',
  has_padding: true,
  url: 'https://example.com',
  button_label: 'Learn more',
  button_variant: 'btn-primary',
}, with_context: false) }}
```

## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />
