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

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

# Card Text

A lightweight Bootstrap card with an optional uploaded icon image, a single drag-and-drop content slot, and no media area. Controls icon size and alignment, border, padding, background, shadow, border radius, equal height, and full-card stretched link.

- **Icon is optional** — upload an image to `icon_image` to show it above the content; leave empty for a plain text card
- `icon_alignment` positions the icon: `start` (left), `center`, `end` (right)
- `stretched_link` requires `link_url` to be set — makes the entire card clickable
- `padded: true` adds `p-4` to the content wrapper; `padded: false` removes all padding
- `equal_height: true` adds `h-100` for consistent heights in grid row layouts
- Subtle background variants (`bg-primary-subtle`, `bg-secondary-subtle`, etc.) pair well with `card_border: false` and `box_shadow: shadow-none`

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

## Properties

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

## Stories

<Stories of={CardTextStories} />

## Examples

### Example 1 — Default text card

```twig
{% embed 'vartheme_bs5_educare:card-text' with {
  card_border: true,
  background_color: 'bg-white',
  padded: true,
  box_shadow: 'shadow-sm',
  corner_style: 'rounded-3',
} %}
  {% block content %}
    <h3 class="h5 mb-2">Card text title</h3>
    <p class="mb-3">A simple text card for descriptions, highlights, or small content blocks.</p>
    <a href="#" class="btn btn-primary">Action</a>
  {% endblock %}
{% endembed %}
```

### Example 2 — Linked card (entire card clickable)

```twig
{% embed 'vartheme_bs5_educare:card-text' with {
  card_border: true,
  background_color: 'bg-white',
  padded: true,
  box_shadow: 'shadow-sm',
  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">Entire card acts as a link.</p>
  {% endblock %}
{% endembed %}
```

### Example 3 — Primary subtle background

```twig
{% embed 'vartheme_bs5_educare:card-text' with {
  card_border: false,
  background_color: 'bg-primary-subtle',
  padded: true,
  box_shadow: 'shadow-none',
  corner_style: 'rounded-3',
} %}
  {% block content %}
    <h3 class="h5 mb-2">Highlighted card</h3>
    <p class="mb-0">Soft tinted background for gentle emphasis without full primary weight.</p>
  {% endblock %}
{% endembed %}
```

### Example 4 — Secondary subtle background

```twig
{% embed 'vartheme_bs5_educare:card-text' with {
  card_border: false,
  background_color: 'bg-secondary-subtle',
  padded: true,
  box_shadow: 'shadow-none',
  corner_style: 'rounded-3',
} %}
  {% block content %}
    <h3 class="h5 mb-2">Warm neutral card</h3>
    <p class="mb-0">Understated background for content-forward layouts.</p>
  {% endblock %}
{% endembed %}
```

### Example 5 — Dark background

```twig
{% embed 'vartheme_bs5_educare:card-text' with {
  card_border: false,
  background_color: 'bg-dark',
  padded: true,
  box_shadow: 'shadow',
  corner_style: 'rounded-3',
} %}
  {% block content %}
    <h3 class="h5 mb-2 text-white">Dark card</h3>
    <p class="mb-0 text-white-50">Use text utility classes when working with dark backgrounds.</p>
  {% endblock %}
{% endembed %}
```

### Example 6 — With icon (left-aligned)

Upload an icon image to `icon_image` to display it above the content. The icon only renders when an image is provided — leaving it empty gives a plain text card.

```twig
{% embed 'vartheme_bs5_educare:card-text' with {
  icon_image: { src: '/path/to/icon.svg', alt: '', width: 64, height: 64 },
  icon_alignment: 'start',
  card_border: true,
  background_color: 'none',
  padded: true,
  box_shadow: 'shadow-sm',
  corner_style: 'rounded-3',
} %}
  {% block content %}
    <h3 class="h5 mb-2">Card with icon</h3>
    <p class="mb-3">The icon appears above the content area when an image is uploaded.</p>
    <a href="#" class="btn btn-primary">Action</a>
  {% endblock %}
{% endembed %}
```

### Example 7 — With icon (centered)

```twig
{% embed 'vartheme_bs5_educare:card-text' with {
  icon_image: { src: '/path/to/icon.svg', alt: '', width: 64, height: 64 },
  icon_alignment: 'center',
  card_border: true,
  background_color: 'bg-body-tertiary',
  padded: true,
  box_shadow: 'shadow-sm',
  corner_style: 'rounded-3',
} %}
  {% block content %}
    <h3 class="h5 mb-2 text-center">Centered icon card</h3>
    <p class="mb-0 text-center">Icon and content aligned to center.</p>
  {% endblock %}
{% endembed %}
```

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