import { html } from 'lit-html'

const variations = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light']

export default {
    title: 'Bootstrap/Badge',
    component: 'bs-badge',
}

export const example = props => html`
    <h1>Example heading <bs-badge variant="${props.variant}" pill="${props.pill}" href="${props.href}">${props.text}</bs-badge></h1>
    <h2>Example heading <bs-badge variant="${props.variant}" pill="${props.pill}" href="${props.href}">${props.text}</bs-badge></h2>
    <h3>Example heading <bs-badge variant="${props.variant}" pill="${props.pill}" href="${props.href}">${props.text}</bs-badge></h3>
    <h4>Example heading <bs-badge variant="${props.variant}" pill="${props.pill}" href="${props.href}">${props.text}</bs-badge></h4>
    <h5>Example heading <bs-badge variant="${props.variant}" pill="${props.pill}" href="${props.href}">${props.text}</bs-badge></h5>
    <h6>Example heading <bs-badge variant="${props.variant}" pill="${props.pill}" href="${props.href}">${props.text}</bs-badge></h6>
`

example.argTypes = {
    variant: {
        control: {
            type: 'select',
            options: variations,
        },
    },
    pill: {
        control: {
            type: 'boolean',
        },
    },
    href: {
        control: {
            type: 'text',
        },
    },
}

example.args = {
    variant: 'secondary',
    pill: false,
    href: '',
    text: 'New',
}

export const badgeInButton = () => html`
    <bs-button variant="primary">
        Profile <bs-badge variant="light" class="ml-2">9</bs-badge>
        <span class="sr-only">unread messages</span>
    </bs-button>
`

export const badgeVariations = () => html` ${variations.map(variant => html` <bs-badge variant="${variant}">${variant}</bs-badge> `)} `

export const pillBadges = () => html` ${variations.map(variant => html` <bs-badge variant="${variant}" pill="true">${variant}</bs-badge> `)} `

export const badgeLinks = () => html` ${variations.map(variant => html` <bs-badge href="#" variant="${variant}">${variant}</bs-badge> `)} `
