<script lang="ts" setup>
import MemberDigitalCardBack from './MemberDigitalCardBack.vue'
import MemberDigitalCardFront from './MemberDigitalCardFront.vue'

defineProps<{
  memberNumber?: string | number | null
  memberName?: string | null
  memberType?: string | null
  companyName?: string | null
  profileUrl?: string | null
  imageUrl?: string | null
  isFlipped: boolean
  expanded?: boolean
}>()
</script>

<template>
  <div class="relative w-full" style="perspective: 1000px">
    <div
      class="relative aspect-7/4.5 w-full transition-transform duration-500 ease-in-out"
      :style="{
        transformStyle: 'preserve-3d',
        transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
      }">
      <div class="absolute inset-0" style="backface-visibility: hidden">
        <MemberDigitalCardFront :member-number="memberNumber" :member-name="memberName"
          :member-type="memberType" :company-name="companyName" :image-url="imageUrl" :expanded="expanded" />
      </div>
      <div class="absolute inset-0" :style="{ backfaceVisibility: 'hidden', transform: 'rotateY(180deg)' }">
        <MemberDigitalCardBack :profile-url="profileUrl" :member-number="memberNumber" :expanded="expanded" />
      </div>
    </div>
  </div>
</template>
