import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from "@storybook/addon-actions"
import BaseAvatar from '@/elements/avatar/BaseAvatar.vue'

<Meta title="Elements|Avatar" component={BaseAvatar} />

# Avatar

<Props of={BaseAvatar} />

<Preview>
  <Story name="Avatar">
    {{
        components: { BaseAvatar },
        template: 
          `<div>
            <div>
              <base-avatar image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
            </div>
          </div>`,
        methods: { action: action("clicked") }
    }}
  </Story>
</Preview>

```html
<base-avatar image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />
```

## Avatar with avatar badge

<Preview>
  <Story name="Avatar badge">
    {{
        components: { BaseAvatar },
        template: 
          `<div>
            <div>
              <base-avatar image="https://images.unsplash.com/photo-1506792006437-256b665541e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
                <template v-slot:badge>
                  <base-avatar image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" size="small" />
                </template>
              </base-avatar>
            </div>
          </div>`,
        methods: { action: action("clicked") }
    }}
  </Story>
</Preview>