import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import '@mozaic-ds/icons-svelte/components/ImageAlt32/ImageAlt32.svelte';
import '@mozaic-ds/icons-svelte/components/ArrowNext20/ArrowNext20.svelte';
import './Callout.svelte';
import '../button/Button.svelte';
import '../link/Link.svelte';
const meta = {
    title: 'Content/Callout',
    component: 'm-callout',
    tags: ['v2'],
    argTypes: {
        appearance: {
            control: 'radio',
            options: ['standard', 'accent', 'tips', 'inverse'],
        },
    },
    args: {
        icon: `<image-alt-32 slot="icon"></image-alt-32>`,
        title: 'This is a title, be concise and use the description message to give details.',
        description: 'Description message.',
    },
    render: (args) => html `
    <m-callout
      appearance=${ifDefined(args.appearance)}
      title=${args.title}
      description=${args.description}
    >
      ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
      ${unsafeHTML(ifDefined(args.footer))}
    </m-callout>
  `,
};
export default meta;
export const Standard = {};
export const Accent = {
    args: { appearance: 'accent' },
};
export const Tips = {
    args: { appearance: 'tips' },
};
export const Inverse = {
    globals: {
        backgrounds: { value: 'inverse' },
    },
    args: { appearance: 'inverse' },
};
export const Button = {
    args: {
        footer: `<m-button outlined slot="footer">Button Label</m-button>`,
    },
};
export const Buttons = {
    args: {
        footer: `
      <m-button slot="footer">Button Label</m-button>
      <m-button slot="footer" outlined="true">Button Label</m-button>
    `,
    },
};
export const Link = {
    args: {
        footer: `
      <m-link href="#" iconPosition="right" slot="footer">
        Stand-alone link

        <arrow-next-20 slot="icon"></arrow-next-20>
      </m-link>
    `,
    },
};
