import {createGlobalMessage} from "./GlobalMessageComponent";

export default {
  title: 'Components/Global Message',
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    type: {
      name: 'Typ',
      control: 'select',
      options: ['light', 'bold', 'alarming'],
      defaultValue: 'light',
    },
    message: {
      name: 'Nachricht',
      control: {type: 'text'},
      defaultValue: 'Leider kommt es durch <a href="#">technische Wartungsmaßnahmen</a> am 2. Mai in der Zeit von 17:30–23:00 zu einer eingeschränkten Verfügbarkeit unserer Internetseite',
    },
  }
}

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

export const SubtleMessage = Template.bind({});
SubtleMessage.args = {
  type: 'light',
};

export const BoldMessage = Template.bind({});
BoldMessage.args = {
  type: 'bold',
};

export const AlarmMessage = Template.bind({});
AlarmMessage.args = {
  type: 'alarming',
};