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

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

# Hero Card

A flexible Bootstrap 5 hero card for promotional sections, feature highlights, and call-to-action blocks. Supports seven media positions (overlay, start, end, top, bottom, content, none), optional edge-to-edge background, content alignment controls, configurable card border and padding, and a primary action button.

- `media_position: overlay` uses Bootstrap card overlay structure with a configurable color and opacity layer
- `media_position: start` or `end` creates a side-by-side split layout; gap is controlled via `split_gap`
- `bg_edge2edge: true` expands the background treatment to the outer wrapper beyond the container
- `media_slot` and `actions` slots allow full custom overrides for media (e.g. video) and button output

> ### Bootstrap documentation
> - [Cards](https://getbootstrap.com/docs/5.3/components/card/)
> - [Card image overlays](https://getbootstrap.com/docs/5.3/components/card/#image-overlays)
> - [Buttons](https://getbootstrap.com/docs/5.3/components/buttons/)
> - [Grid system](https://getbootstrap.com/docs/5.3/layout/grid/)

## Properties

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

## Stories

<Stories of={HeroCardStories} />

## Example

### Example #1 : Overlay hero

```twig
{% include 'vartheme_bs5_educare:card-hero' with {
  title: 'Build faster with reusable components',
  heading_tag: 'h2',
  content_text: '<p>Create polished layouts with a flexible Bootstrap card structure.</p>',
  media: {
    src: '/path/to/image.jpg',
    alt: 'Hero image',
    width: 1200,
    height: 800
  },
  media_position: 'overlay',
  overlay_bg: 'bg-dark',
  overlay_opacity: 'opacity-50',
  content_color: 'text-white',
  button_1_label: 'Learn more',
  button_1_url: '/features',
  button_1_style: 'btn-primary',
  button_1_target: 'default'
} only %}
```

### Example #2 : Split hero with image on the right

```twig
{% include 'vartheme_bs5_educare:card-hero' with {
  title: 'Build faster with reusable components',
  heading_tag: 'h2',
  content_text: '<p>Create polished layouts with a flexible Bootstrap card structure.</p>',
  media: {
    src: '/path/to/image.jpg',
    alt: 'Hero image',
    width: 1200,
    height: 800
  },
  media_position: 'end',
  split_gap: 'g-4',
  padding: true,
  horizontal_alignment: 'text-start',
  vertical_alignment: 'justify-content-center',
  background_color: 'bg-white',
  content_color: 'text-dark',
  button_1_label: 'Learn more',
  button_1_url: '/features',
  button_1_style: 'btn-primary'
} only %}
```

### Example #3 : Edge-to-edge promotional block

```twig
{% include 'vartheme_bs5_educare:card-hero' with {
  title: 'Promotional block',
  heading_tag: 'h2',
  content_text: '<p>Full-width hero with edge-to-edge dark background.</p>',
  media_position: 'none',
  bg_edge2edge: true,
  container_type: 'container',
  background_color: 'bg-dark',
  content_color: 'text-white',
  horizontal_alignment: 'text-center',
  button_1_label: 'Get started',
  button_1_url: '/start',
  button_1_style: 'btn-light'
} only %}
```

## Source code

<Source code={templateSource} />
