import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { text, select } from '@storybook/addon-knobs';
import ChecHeader from '@/components/ChecHeader.vue';
import ChecButton from '@/components/ChecButton.vue';

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

# Header

<Props of={ ChecHeader } />

<Preview>
  <Story name="Header">
    {{
      components: {
        ChecHeader,
        ChecButton,
      },
      props: {
        title: {
          default: text('Title', 'Section Title')
        },
        label: {
          default: text('Label', 'Label'),
        },
        variant: {
          default: select('Variant', ['section', 'card', 'section']),
        },
        withButtonSlot: {
          default: select('Pass button slot', [true, false], true),
        },
        headerTag: {
          default: select('Header tag', [null, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'], null)
        }
      },
      template: `
        <div class="py-16 px-4 max-w-6xl mx-auto font-lato">
          <ChecHeader
            :title="title"
            :label="label"
            :variant="variant"
            :header-tag="headerTag"
          >
            <ChecButton v-if="withButtonSlot" color="primary" variant="round">
              Button Texts
            </ChecButton>
          </ChecHeader>
        </div>`,
    }}
  </Story>
</Preview>