<template>
  <div class="flex">
    <a
      v-if="settings.twitter"
      :href="`https://twitter.com/${settings.twitter}`"
      target="_blank"
      rel="noopener noreferrer"
      title="Twitter"
      name="Twitter"
      class="d-icon"
      :class="[padding]"
    >
      <IconTwitter :class="size" />
    </a>
    <a
      v-if="settings.github && settings.github.repo && repoUrl"
      :href="`https://github.com/${settings.github.repo}`"
      target="_blank"
      rel="noopener noreferrer"
      title="GitHub"
      name="GitHub"
      class="d-icon"
      :class="[padding]"
    >
      <IconGitHub :class="size" />
    </a>
  </div>
</template>

<script>
import { defineComponent } from "@nuxtjs/composition-api";
import { useSettings, useGitHub } from "../../composables";
export default defineComponent({
  props: {
    size: {
      type: String,
      default: "w-6 h-6"
    },
    padding: {
      type: String,
      default: "p-0"
    }
  },
  setup() {
    const { settings } = useSettings();
    const { repoUrl } = useGitHub();
    return {
      repoUrl,
      settings
    };
  }
});
</script>
