<template>
  <div class="member">
    <div class="image">
      <!-- TODO: enable lazy-loading -->
      <ImageWebpWrapper
        :alt="member.name"
        :image-default="member.image.default"
        :image-webp="member.image.webp"
        :lazy-load-enable="false"
        class="lazyload"
        height="500"
        width="364" />
    </div>
    <div class="info-mask" @click="openLinkedin">
      <MemberInfo :member="member" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { ITeamSwiper } from '../Team.types';
import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';
import MemberInfo from '@/components/sections/Team/Member/MemberInfo.vue';

export default defineComponent({
  components: { MemberInfo, ImageWebpWrapper },

  props: {
    member: {
      type: Object as PropType<ITeamSwiper.Member>,
      required: true,
    },
  },

  methods: {
    openLinkedin() {
      window.open(this.member.linkedin, '_blank');
    },
  },
});
</script>

<style lang="scss" scoped>
.member {
  min-width: 364px;
  max-width: 364px;
  height: 500px;

  cursor: pointer;

  transition: filter 0.5s linear;

  .image {
    width: 100%;
    height: 100%;

    &:deep(img) {
      width: 100%;
      height: 100%;
      object-fit: cover;

      border-radius: 16px;
    }
  }

  &:hover {
    .info-mask {
      visibility: visible;
      opacity: 1;
    }
  }
}

.info-mask {
  position: absolute;
  top: 0;
  bottom: 0;

  width: 100%;
  height: 100%;

  background: rgba(40, 40, 40, 0.8);
  border-radius: 16px;
  visibility: hidden;
  opacity: 0;

  transition: opacity 0.4s, visibility 0.4s;
}
</style>
