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

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

# Pricing Card

A pricing plan card for displaying tiered offers such as Starter, Pro, or Enterprise plans. Renders an optional badge, configurable heading, price with currency symbol (before or after), optional price period and note, a rich text features list, and an optional CTA button.

- Currency symbol position is controlled by `symbol_position` (`before` or `after`) to support regional formats
- `promote: true` emphasizes the card visually with a stronger border and shadow — use for one highlighted plan per pricing group
- Button is rendered via the shared button component using `button_variant`; omit `button_url` and `button_label` to hide the button entirely
- `show_features_divider` adds a top border between the price block and the features list

> ### Bootstrap documentation
> - [Cards](https://getbootstrap.com/docs/5.3/components/card/)
> - [Badges](https://getbootstrap.com/docs/5.3/components/badge/)
> - [Buttons](https://getbootstrap.com/docs/5.3/components/buttons/)
> - [Shadows](https://getbootstrap.com/docs/5.3/utilities/shadows/)

## Properties

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

## Stories

<Stories of={CardPricingStories} />

## Example

### Example #1 : Basic pricing card

```twig
{{ include('vartheme_bs5_educare:card-pricing', {
  heading_text: 'Starter',
  level: 3,
  description: 'Good for small teams getting started.',
  price: '29',
  currency_symbol: '$',
  currency_code: 'USD',
  symbol_position: 'before',
  price_period: '/month',
  price_note: 'Billed monthly',
  text: '<ul><li>3 users</li><li>Email support</li><li>Basic reports</li></ul>',
  show_features_divider: true,
  shadow: 'shadow',
  border: 'border',
  background_color: 'bg-body',
  text_align: 'text-start',
  button_url: 'https://example.com/starter',
  button_label: 'Choose plan',
  button_variant: 'btn-primary',
  button_target: 'self',
  promote: false
}, with_context: false) }}
```

### Example #2 : Promoted plan

```twig
{{ include('vartheme_bs5_educare:card-pricing', {
  badge_text: 'Most popular',
  heading_text: 'Pro',
  level: 3,
  description: 'Best option for growing teams.',
  price: '79',
  currency_symbol: '$',
  currency_code: 'USD',
  symbol_position: 'before',
  price_period: '/month',
  price_note: 'Billed annually',
  text: '<ul><li>Unlimited users</li><li>Priority support</li><li>Advanced analytics</li></ul>',
  show_features_divider: true,
  shadow: 'shadow-lg',
  border: 'border-primary',
  background_color: 'bg-body',
  text_align: 'text-center',
  button_url: 'https://example.com/pro',
  button_label: 'Get started',
  button_variant: 'btn-primary',
  button_target: 'blank',
  promote: true
}, with_context: false) }}
```

### Example #3 : Dark enterprise card

```twig
{{ include('vartheme_bs5_educare:card-pricing', {
  heading_text: 'Enterprise',
  level: 3,
  description: 'For larger organizations with custom needs.',
  price: '199',
  currency_symbol: '$',
  currency_code: 'USD',
  symbol_position: 'before',
  price_period: '/month',
  text: '<ul><li>Dedicated support</li><li>Custom onboarding</li><li>Security review</li></ul>',
  shadow: 'shadow-lg',
  border: 'border-dark',
  background_color: 'bg-dark text-white',
  text_align: 'text-start',
  button_url: 'https://example.com/enterprise',
  button_label: 'Contact sales',
  button_variant: 'btn-light',
  button_target: 'self',
  promote: false
}, with_context: false) }}
```

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