import {createMiniTeaser} from "./MiniTeaserComponent";

export default {
  title: 'Components/Mini Teaser',
  parameters: {
    backgrounds: {
      default: 'white',
    },
  },
  argTypes: {
    type: {
      name: 'Typ',
      control: {type: 'select'},
      options: ['standard', 'infoteaser'],
      defaultValue: 'standard',
    },
    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 MiniTeaser = ({...args}) => {
  return createMiniTeaser({...args});
}

export const StandardMiniTeaser = MiniTeaser.bind({});
StandardMiniTeaser.args = {};

export const infobanner = MiniTeaser.bind({});
infobanner.args = {type:'infoteaser'};

export const infobannerWithoutIcon = MiniTeaser.bind({});
infobannerWithoutIcon.args = {type:'infoteaser', icon: null};

export const infobannerBackground = MiniTeaser.bind({});
infobannerBackground.args = {type:'infoteaser', backgroundImage: './dummy/placeholder-4-3.svg'};