<script setup lang="ts">
const { locale } = useI18n();

interface Props {
  title: string;
  address: string;
  phone: string;
  whatsapp: string;
  email: string;
  iframeMap: string;
}

const props = defineProps<Props>();
</script>
<template>
  <div
    class="cairo flex w-full flex-col items-center gap-6 md:flex-row xl:items-start"
  >
    <div
      class="relative z-10 w-[95%] rounded-[8px] xl:h-[170.18px] xl:w-[170.18px]"
    >
      <iframe
        :title="props.title"
        :src="props.iframeMap"
        class="h-full w-full rounded-[8px]"
        style="border: 0"
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
      />
      <div
        class="border-surface-background-gradient absolute end-[-5px] top-1 z-[-1] h-full w-full rounded-[4px] border dark:border-white"
      />
    </div>
    <div class="w-full pe-2 xl:w-[calc(100%-194.18px)]">
      <h4 class="text-accent mb-4">{{ props.title }}</h4>
      <ul class="flex flex-col gap-3">
        <li class="flex items-center gap-2">
          <SvgContactLocationIcon />
          <span class="text-sm">{{ props.address }}</span>
        </li>
        <li class="flex items-center gap-2">
          <SvgContactWhatsappIcon />
          <NuxtLink
            :href="`https://wa.me/${props.whatsapp}`"
            target="_blank"
            class="text-sm"
            ><span v-if="locale === 'en'">+</span>{{ props.whatsapp
            }}<span v-if="locale === 'ar'">+</span></NuxtLink
          >
        </li>
        <li class="flex items-center gap-2">
          <SvgContactCallIcon />
          <NuxtLink :href="`tel:${props.phone}`" target="_blank" class="text-sm"
            ><span v-if="locale === 'en'">+</span>{{ props.phone
            }}<span v-if="locale === 'ar'">+</span></NuxtLink
          >
        </li>
        <li class="flex items-center gap-2">
          <SvgContactMailIcon />
          <NuxtLink :href="`mailto:${props.email}`" class="text-sm">{{
            props.email
          }}</NuxtLink>
        </li>
      </ul>
    </div>
  </div>
</template>
