import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
import * as DiscountBadgeStories from "./discount-badge.component.stories";

<Meta of={DiscountBadgeStories} />

# Discount Badge

A reusable UI component for displaying a discount (percentage or fixed amount) in a badge format.

<Canvas of={DiscountBadgeStories.PercentDiscount} />

## Usage

The discount badge component is designed to be used in billing and subscription interfaces to
display discount information.

```ts
import { DiscountBadgeComponent, Discount } from "@bitwarden/pricing";
```

```html
<billing-discount-badge [discount]="discount"></billing-discount-badge>
```

## API

### Inputs

| Input      | Type                            | Description                                                                      |
| ---------- | ------------------------------- | -------------------------------------------------------------------------------- |
| `discount` | `Discount \| null \| undefined` | **Optional.** Discount object. If null, undefined, or inactive, badge is hidden. |

### Discount Type

```ts
import { DiscountTypes, DiscountType } from "@bitwarden/pricing";

type Discount = {
  /** The type of discount */
  type: DiscountType; // DiscountTypes.AmountOff | DiscountTypes.PercentOff
  /** The discount value (percentage or amount depending on type) */
  value: number;
};
```

## Behavior

- The badge is only displayed when `discount` is provided and `value` is greater than 0.
- For `percent-off` type: percentage values can be provided as 0-100 (e.g., `20` for 20%) or 0-1
  (e.g., `0.2` for 20%).
- For `amount-off` type: amount values are formatted as currency (USD) with 2 decimal places.

## Examples

### Percentage Discount

<Canvas of={DiscountBadgeStories.PercentDiscount} />

### Amount Discount

<Canvas of={DiscountBadgeStories.AmountDiscount} />
