<template>
  <p>default footer</p>
  <AisFooter class="ui-max" />

  <p>footer with custom links, socials, contacts</p>
  <AisFooter
    :contacts="[
      { icon: faPhone, label: 'phone number', href: '#' },
      { icon: faEnvelope, label: 'email', href: '#' },
      { icon: faComment, label: 'chat', href: '#' },
    
    ]"
    :socials="[
      { icon: faFacebookSquare, href: '#' },
      { icon: faTwitterSquare, href: '#' },
    ]"
  >
    <template #primary>
      <AisFooterLinks
        :heading="{ label: 'Functional Support', visible: false }"
        :items="[
          { label: 'MAUI', href: 'https://maui.uiowa.edu' },
          { label: 'MyUI', href: 'https://myui.uiowa.edu' },
          { label: 'ICON', href: 'https://icon.uiowa.edu' },
          { label: 'Workflow', href: 'https://workflow.uiowa.edu' },
          { label: 'Self-Service', href: 'https://hris.uiowa.edu' }
        ]"
      />
    </template>
    <template #secondary>
      <AisFooterLinks
        :heading="{ label: 'Functional Support', visible: false }"
        :items="[
          { label: 'Office of the President', href: 'https://maui.uiowa.edu' },
          { label: 'Office of Strategic Communications', href: 'https://myui.uiowa.edu' },
          { label: 'COVID Response', href: 'https://icon.uiowa.edu' },
        ]"
      />
    </template>
  </AisFooter>
</template>

<script setup>
import AisFooter from "@/components/footer/AisFooter.vue";
import AisFooterLinks from "../AisFooterLinks.vue";
import { faFacebookSquare, faTwitterSquare } from "@fortawesome/free-brands-svg-icons";
import { faPhone, faEnvelope, faComment } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faFacebookSquare, faTwitterSquare)
</script>