<template>
  <UContainer
    class="flex flex-col gap-5 p-4 sm:p-6 lg:p-8 max-w-3xl"
    as="section"
  >
    <div class="text-sm text-gray-500">Let's connect</div>

    <div class="flex gap-4 overflow-x-auto">
      <UButton
        color="neutral"
        icon="mynaui:calendar"
        variant="soft"
        target="_blank"
        to="https://cal.com/mariosant/30min"
      >
        Calendar
      </UButton>

      <UButton
        color="neutral"
        icon="mynaui:envelope"
        variant="soft"
        target="_blank"
        to="mailto:mariosant@sent.com"
      >
        Email
      </UButton>

      <UButton
        color="neutral"
        icon="mynaui:brand-github"
        variant="soft"
        target="_blank"
        to="https://github.com/mariosant"
      >
        Github
      </UButton>

      <UButton
        color="neutral"
        icon="mynaui:brand-linkedin"
        variant="soft"
        target="_blank"
        to="https://www.linkedin.com/in/mariosant/"
      >
        Linkedin
      </UButton>
    </div>
  </UContainer>
</template>
