<template>
  <div class="h-[272px]">
    <h2 class="heading-02 mb-4">
      {{ t('header.contacts.astana.title') }}
    </h2>
    <div class="grid grid-cols-2 gap-5 ">
      <div class="xl:grid grid-cols-2 grid-rows-3 flex flex-wrap gap-4 ">
        <div v-for="(item, index) in AstanaItems" class="flex flex-col gap-2 " :class="{'col-span-2':index===0 }">
          <div class="heading-04">
            {{ t(item.title) }}
          </div>
          <a
            class="flex items-center gap-1 text-deepblue-900 dark:text-white"
            :href="item?.to"
            :target="item.icon === Whatsapp ? '_blank' : '_self'"
          >
            <component :is="item.icon"/>
            <div class=" body-400">
              {{ t(item.subtitle) }}
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import Location from "#adata-ui/icons/location.vue";
import Mail from "#adata-ui/icons/mail.vue";
import Clock from "#adata-ui/icons/clock.vue";
import Whatsapp from "#adata-ui/icons/whatsapp.vue";

const {t} = useI18n()
const AstanaItems = [
  {
    title: 'header.contacts.astana.adress.title',
    subtitle: 'header.contacts.astana.adress.subtitle',
    icon: Location,
    to: 'https://yandex.kz/maps/ru/org/adata_consulting/214484722242/?ll=71.429573%2C51.131319&z=20.56'
  },
  {
    title: 'header.contacts.astana.email.title',
    subtitle: 'info@adata-c.kz',
    icon: Mail,
    to: 'mailto:info@adata-c.kz'
  },
  {
    title: 'header.contacts.astana.schedule.title',
    subtitle: 'header.contacts.astana.schedule.subtitle',
    icon: Clock,
  },
  {
    title: 'header.contacts.astana.sellDep.title',
    subtitle: '+7 700 744 00 10',
    icon: Whatsapp,
    to: "https://api.whatsapp.com/send/?phone=77007440010"
  },
]
</script>

<style scoped>

</style>
