import {
  ArgsTable,
  Canvas,
  Description,
  Meta,
  Story,
} from "@storybook/addon-docs"

import VFooter from "~/components/VFooter/VFooter.vue"

<Meta title="Components/VFooter" component={VFooter} />

export const Template = (args) => ({
  template: '<VFooter v-bind="args" />',
  components: { VFooter },
  setup() {
    return { args }
  },
})

# VFooter

<Description of={VFooter} />

<ArgsTable of={VFooter} />

## Content footer

This version of the footer is to be used in results and single content details.
It contains links to internal pages.

<Canvas>
  <Story
    name="Content"
    height="200px"
    parameters={{ layout: "fullscreen" }}
    args={{ mode: "content" }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Internal footer

This version of the footer is to be used in content pages when the links to
internal pages move to the header instead.

<Canvas>
  <Story
    name="Internal"
    height="200px"
    parameters={{ layout: "fullscreen" }}
    args={{ mode: "internal" }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
