import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Tabs.svelte';
import '../tab/Tab.svelte';
import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
const meta = {
    title: 'Navigation/Tabs',
    component: 'm-tabs',
    subcomponents: { Tab: 'm-tab' },
    args: {
        tab: `
      <m-tab slot="tab" selected="true">label</m-tab>
      <m-tab slot="tab">label</m-tab>
      <m-tab slot="tab">label</m-tab>
      <m-tab slot="tab">label</m-tab>
    `,
    },
    render: (args) => html `
    <m-tabs
      description=${ifDefined(args.description)}
      ?centered=${args.centered}
      ?divider=${args.divider}
      value=${ifDefined(args.value)}
    >
      ${unsafeHTML(ifDefined(args.tab))}
    </m-tabs>
  `,
};
export default meta;
export const Default = {};
export const Icons = {
    args: {
        tab: `
      <m-tab slot="tab" selected="true">
        <chevron-right-24 slot="icon"></chevron-right-24>
        label
      </m-tab>
      <m-tab slot="tab">
        <chevron-right-24  slot="icon"></chevron-right-24>
        label
      </m-tab>
      <m-tab slot="tab">
        <chevron-right-24  slot="icon"></chevron-right-24>
        label
      </m-tab>
      <m-tab slot="tab">
        <chevron-right-24  slot="icon"></chevron-right-24>
        label
      </m-tab>
    `,
    },
};
export const Centered = {
    args: { centered: true },
};
export const NoDivider = {
    args: { divider: false },
};
export const Disabled = {
    args: {
        tab: `
      <m-tab slot="tab" selected="true">label</m-tab>
      <m-tab slot="tab">label</m-tab>
      <m-tab slot="tab" disabled="true">label</m-tab>
      <m-tab slot="tab" disabled="true">label</m-tab>
    `,
    },
};
export const WithBadges = {
    args: {
        tab: `
      <m-tab slot="tab" selected="true" badge="8">label</m-tab>
      <m-tab slot="tab" badge="2">label</m-tab>
      <m-tab slot="tab" disabled="true">label</m-tab>
      <m-tab slot="tab" disabled="true">label</m-tab>
    `,
    },
};
