<template>
  <div :class="getModifiersClass('c-contact-card', modifiers)">
    <div v-if="imageUrl || $slots.image" :class="getModifiersClass('c-contact-card__image', modifiers)">
      <img v-if="imageUrl" :src="imageUrl" :alt="nameText" />
      <slot v-else-if="$slots.image" name="image" />
    </div>
    <address class="c-contact-card__information-row">
      <h4 v-if="nameText" class="c-contact-card__name">{{ nameText }}</h4>
      <h5 v-if="titleText" class="c-contact-card__title">{{ titleText }}</h5>
      <h5 v-if="phone" class="c-contact-card__information" aria-label="Phone number">
        <span v-if="phoneLabel">{{ phoneLabel }}</span>
        <a :href="`tel:${phone}`">{{ phone }}</a>
      </h5>
      <h5 v-if="email" class="c-contact-card__information">
        <span v-if="emailLabel">{{ emailLabel }}</span>
        <a :href="`mailto:${email}`" @mouseover.once="onDefuscate" @focus.once="onDefuscate">
          {{ emailText || email }}
        </a>
      </h5>
    </address>
  </div>
</template>

<script setup lang="ts">
import type { ModifierItems } from './contact-card.config';
import useComponentModifiers from '../../composable/useComponentModifiers';

defineProps<{
  imageUrl?: string;
  nameText?: string;
  titleText?: string;
  phone?: string;
  phoneLabel?: string;
  email?: string;
  emailText?: string;
  emailLabel?: string;
  modifiers?: ModifierItems;
  onDefuscate?: (event: MouseEvent | FocusEvent) => void;
}>();

const { getModifiersClass } = useComponentModifiers();
</script>
