import { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import LinkIntroduction from './content/LinkIntroduction.mdx';

import {
  iconColors,
  parametersDefault,
  argTypesDefault,
} from './config';

import MLink from '../../Link';

<Meta title="Link" component={MLink} />

export const actionsData = { onClick: action('onClick') };

export const Template = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MLink },
  methods: actionsData,
  template: `
    <m-link
      :link="link"
      :href="href"
      :rel="rel"
      :target="target"
      :active="active"
      :disabled="disabled"
      :to="to"
      :append="append"
      :replace="replace"
      :event="event"
      :active-class="activeClass"
      :exact="exact"
      :exact-active-class="exactActiveClass"
      :router-tag="routerTag"
      :prefetch="prefetch"
      :no-prefetch="noPrefetch"
      :router-component-name="routerComponentName"
      @click="onClick"
    />
  `
});

# Link

<LinkIntroduction />

<Anchor storyId="link--default-story"></Anchor>

## Default Link

<Canvas>
  <Story
    name="Default"
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault }}  
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />