<template>
  <div>
    <figure :class="figureClass">
      <div >
        <img :class="imgClass" :src="image" />
        <div class="is-badge">
          <slot name="badge" />
        </div>
      </div>
    </figure>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'

@Component
export default class OrganizationAvatar extends Vue {
  @Prop() readonly image!: string
  @Prop({ default: 'normal' }) readonly size!: string
  @Prop() readonly type!: string

  get figureClass () {
    return {
      image: true,
      'is-64x64': this.size === 'normal',
      'is-32x32': this.size === 'small'
    }
  }

  get imgClass () {
    return {
      'is-rounded': this.type !== 'square',
      'is-cropped': true,
      'is-64x64': this.size === 'normal',
      'is-32x32': this.size === 'small'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";
@import "bulma/sass/elements/image.sass";

.is-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 100;
}

.is-cropped {
  object-fit: cover;
  object-position: center;
}

img.is-64x64 {
  width: 64px;
  height: 64px;
}

img.is-32x32 {
  width: 32px;
  height: 32px;
}
</style>
