import {createTopicTeasersSection} from "./TopicTeasersComponent";

export default {
  title: 'Sections/TopicTeasers',
  parameters: {
    layout: 'fullscreen',
  },
  args: {
    headline: 'Unsere Themensammlung',
    type: 'single-topic',
    maxItems: 6,
  },
  argTypes: {
    maxItems: { control: { type: 'range', min: 1, max: 6, step: 1 } },
    type: { control: { type: 'select', options: ['single-topic', 'topic-linklist'] } },
  }
}

const Template = ({...args}) => {
  return createTopicTeasersSection({...args});
};

export const SingleTopicTiles = Template.bind({});
SingleTopicTiles.args = {
  type: 'single-topic',
};

export const LinkListTeasers = Template.bind({});
LinkListTeasers.args = {
  type: 'topic-linklist',
};

export const FiveTeasers = Template.bind({});
FiveTeasers.args = {
  maxItems: 5,
};

export const FourTeasers = Template.bind({});
FourTeasers.args = {
  maxItems: 4,
};

export const ThreeTeasers = Template.bind({});
ThreeTeasers.args = {
  maxItems: 3,
};

export const TwoTeasers = Template.bind({});
TwoTeasers.args = {
  maxItems: 2,
};