<script>
export default {
  props: ["contacts"],
  data: () => {
    return {

    };
  },
};
</script>

<template>
    <div class="text-left max-w-xl px-6">
      <h2
        class="
          font-general-medium
          text-2xl text-white
          mt-8
          mb-8
        "
      >
        Контакты
      </h2>
      <ul class="font-general-regular">
        <li class="flex" v-for="contact in contacts" :key="contact.id">
          <i
            :data-feather="contact.icon"
            class="w-5 text-gray-500 mr-4"
          ></i>
          <a
            :href="contact.url"
            class="text-lg mb-4 text-white"
            :class="
              contact.icon === 'mail' || contact.icon === 'phone'
                ? 'hover:underline cursor-pointer'
                : ''
            "
            aria-label="Website and Phone"
          >
            {{ contact.name }}
          </a>
        </li>
      </ul>
    </div>
</template>

<style lang="scss" scoped></style>
