import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Alert from '../components/Ui/alert/Alert';
import Icons from '../constants/IconArray.js';



// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'UI elements/Alert',
  component: Alert,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    alertType: {defaultValue: 'primary',control:{ type:"select", options:["primary", "success", "info", "warning", "danger"]}},
    iconName: {defaultValue: 'person',control:{type: 'select', options:Icons}}
  },
} as ComponentMeta<typeof Alert>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Alert> = (args) => <Alert {...args} />;

export const primaryAlert = Template.bind({});
primaryAlert.args = {
  title: 'Primary Alert!',
  message: 'This is a primary alert—check it out!',
  alertType: 'primary',
  iconName: 'check',
  closeIcon: true,
  alertIcon: true
};

export const successAlert = Template.bind({});
successAlert.args = {
  title: 'Success Alert!',
  message: 'This is a success alert—check it out!',
  alertType: 'success',
  iconName: 'success',
  closeIcon: true,
  alertIcon: true
};

export const infoAlert = Template.bind({});
infoAlert.args = {
  title: 'Info Alert!',
  message: 'This is a info alert—check it out that has an icon too!',
  alertType: 'info',
  iconName: 'success',
  closeIcon: true,
  alertIcon: true
};

export const warningAlert = Template.bind({});
warningAlert.args = {
  title: 'Warning Alert!',
  message: 'This is a warning alert—check it out that has an icon too!',
  alertType: 'warning',
  iconName: 'success',
  closeIcon: true,
  alertIcon: true
};

export const dangerAlert = Template.bind({});
dangerAlert.args = {
  title: 'Danger Alert!',
  message: 'This is a danger alert—check it out that has an icon too!',
  alertType: 'danger',
  iconName: 'danger',
  closeIcon: true,
  alertIcon: true
};