import {createTopicTeaser} from "./TopicTeaserComponent";

export default {
  title: 'Components/Topics Teaser',
  parameters: {
    backgrounds: {
      default: 'lightblue',
    },
  },
  argTypes: {
    type: {
      name: 'Typ',
      control: {type: 'select'},
      options: ['single-topic', 'topic-linklist'],
      defaultValue: 'single-topic',
    },
    title: {
      name: 'Titel',
      control: 'text',
      defaultValue: 'Schwerpunktthema Digitalisierung',
    },
    link: {
      name: 'Link',
      control: 'text',
      defaultValue: '#',
    },
    icon: {
      name: 'Icon',
      control: {type: 'select'},
      options: ['Roboter', 'Anker', 'Blitz', 'Buch Brille', 'Brexit', 'Chart', 'Rettungsring', 'Magazin'],
      defaultValue: 'Roboter',
    }
  }
}

const TopicTeaser = ({...args}) => {
  return createTopicTeaser({...args});
}

export const SingleTopicTeaser = TopicTeaser.bind({});
SingleTopicTeaser.args = {};

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