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

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

# Impressed Card

A stacked Bootstrap card with an optional media image at the top or bottom, a tag overlay slot, and a drag-and-drop content slot. Supports border, padding, background color, shadow, corner style, equal height, and full-card stretched link.

- `media_position: bottom` reverses the flex column order so the image renders below the content
- The `tag` slot renders as an overlay in the top-left corner of the media image
- `stretched_link` requires `link_url` to be set — makes the entire card clickable
- `padded: true` adds `p-4` to the content area; when `padded: false` and no content is slotted, a `py-4` fallback is applied
- `equal_height: true` adds `h-100` to the card wrapper for consistent grid row heights

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

## Properties

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

## Stories

<Stories of={CardImpressedStories} />

## Example

### Example #1 : Default impressed card

```twig
{% embed 'vartheme_bs5_educare:card-impressed' with {
  media_position: 'top',
  media_image: {
    src: '/path/to/image.jpg',
    alt: 'Card image',
    width: 800,
    height: 600,
  },
  ratio: 'ratio-16x9',
  fit: 'object-fit-cover',
  card_border: true,
  background_color: 'bg-white',
  padded: true,
  box_shadow: 'shadow-sm',
  corner_style: 'rounded-3',
} %}
  {% block tag %}
    <span class="badge text-bg-dark">Feature</span>
  {% endblock %}
  {% block content %}
    <h3 class="h5 mb-2">Impressed Card</h3>
    <p class="mb-0 text-muted">A stacked card with media, tag overlay, and content slots.</p>
  {% endblock %}
{% endembed %}
```

### Example #2 : Linked card with stretched-link

```twig
{% embed 'vartheme_bs5_educare:card-impressed' with {
  media_image: {
    src: '/path/to/image.jpg',
    alt: 'Card image',
    width: 800,
    height: 600,
  },
  ratio: 'ratio-21x9',
  card_border: true,
  background_color: 'bg-white',
  padded: true,
  box_shadow: 'shadow-lg',
  corner_style: 'rounded-3',
  stretched_link: true,
  link_url: 'https://example.com',
  link_target: '_blank',
} %}
  {% block content %}
    <h3 class="h5 mb-2">Clickable card</h3>
    <p class="mb-0">The whole card becomes clickable via stretched link.</p>
  {% endblock %}
{% endembed %}
```

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