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/Profile24/Profile24.svelte';
import './Avatar.svelte';
const meta = {
    title: 'Content/Avatar',
    component: 'm-avatar',
    tags: ['v2'],
    argTypes: {
        size: {
            control: 'inline-radio',
            options: ['s', 'm', 'l'],
        },
    },
    args: {
        default: `
      <img src="/images/Avatar.png" alt="Dieter Rams" loading="lazy"/>
    `,
    },
    render: (args) => html `
    <m-avatar size=${ifDefined(args.size)}> ${unsafeHTML(ifDefined(args.default))} </m-avatar>
  `,
};
export default meta;
export const Default = {};
export const Initials = {
    args: {
        default: `
      DS
    `,
    },
};
export const Icon = {
    args: {
        default: `
      <Profile-24></profile-24>
    `,
    },
};
