<template>
    <v-card class="bg-transparent" :class="isMobile ? '' : 'auth-card pa-4'"  color="transparent" elevation="0">
      <v-card-text class="text-center">
        <v-avatar color="#e0f2f1" size="120" class="mb-4">
          <span class="text-h5 text-green-darken-2">{{ getInitials() }}</span>
        </v-avatar>
        <h2 class="text-h5 font-weight-bold mb-2">Dr. {{ doctorName }}, <span>{{ doctorSpecialty }}</span></h2>
        <!-- <p class="text-body-1 mb-4">{{ doctorSpecialty }}</p> -->
        <p class="text-body-2 text-grey-darken-1">
          Dr. {{ doctorName }} is a dedicated medical professional with
          extensive experience in {{ doctorSpecialty.toLowerCase() }}. Known for his patient-
          centered approach, he strives to provide personalized care and
          ensure the best outcomes for his patients. Dr. {{ lastName }} stays at the
          forefront of medical advancements to offer the highest quality
          treatment.
        </p>
      </v-card-text>
    </v-card>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  
  const doctorName = ref('Jonathan Hines');
  const doctorSpecialty = ref('MD');
  
  const lastName = computed(() => {
    return doctorName.value.split(' ').pop();
  });
  
  const isMobile = ref(window.innerWidth <= 768);
  
  const getInitials = () => {
    return doctorName.value
      .split(' ')
      .map(name => name[0])
      .join('');
  };
  
  const checkIfMobile = () => {
    isMobile.value = window.innerWidth <= 768;
  };
  
  onMounted(() => {
    checkIfMobile();
    window.addEventListener('resize', checkIfMobile);
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', checkIfMobile);
  });
  </script>
  
  <style scoped>
  .v-card {
    background-color: #f5f5f5 !important;
  }
  </style>