<template>
  <div class="bg-light text-sm py-1 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
      <div class="flex items-center gap-3">
        <a
          href="https://www.instagram.com/mucomutfak/"
          target="_blank"
          rel="noopener noreferrer"
          class="hover:text-highlight"
        >
          <component :is="icons.instagram" class="w-4.5 h-4.5" />
        </a>

        <a
          href="https://www.tiktok.com/@mucomutfak/"
          target="_blank"
          rel="noopener noreferrer"
          class="hover:text-highlight"
        >
          <component :is="icons.tiktok" class="w-4.5 h-4.5" />
        </a>

        <a
          href="https://www.facebook.com/mucomutfakvekahve/"
          target="_blank"
          rel="noopener noreferrer"
          class="hover:text-highlight"
        >
          <component :is="icons.facebook" class="w-4.5 h-4.5" />
        </a>
      </div>
      <div>
        <a
          href="tel:+902522120777"
          class="flex items-center gap-2 hover:text-highlight"
        >
          +90 (252) 212 07 77
        </a>
      </div>
      <LanguageSwitcher />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useIcons } from "@/composables/useIcons";

const { t } = useI18n();
const icons = useIcons();
</script>
