<template>
  <UContainer class="flex flex-col gap-5" as="section">
    <div class="text-sm text-gray-500">Let's connect</div>

    <div class="flex gap-4 overflow-x-auto">
      <UButton
        color="purple"
        icon="i-heroicons-arrow-right-circle"
        class="rounded-full"
        variant="soft"
        target="_blank"
        to="https://www.calendar.com/mariosant/short-video-call"
      >
        Calendar
      </UButton>

      <UButton
        color="green"
        icon="i-heroicons-arrow-right-circle"
        class="rounded-full"
        variant="soft"
        target="_blank"
        to="mailto:mariosant@sent.com"
      >
        Email
      </UButton>

      <UButton
        color="orange"
        icon="i-heroicons-arrow-right-circle"
        class="rounded-full"
        variant="soft"
        target="_blank"
        to="https://github.com/mariosant"
      >
        Github
      </UButton>

      <UButton
        color="blue"
        icon="i-heroicons-arrow-right-circle"
        class="rounded-full"
        variant="soft"
        target="_blank"
        to="https://www.linkedin.com/in/mariosant/"
      >
        Linkedin
      </UButton>
    </div>
  </UContainer>
</template>
