import CAlerts from "../components/CAlerts/CAlerts.vue";
import "./utils.css";

export default {
  title: "CAlerts",
  component: CAlerts,
  argTypes: {
    label: String,
    color: { control: { type: 'select', options: ['gray', 'red', 'yellow', 'green', 'indigo', 'purple', 'pink'] } },
    description:String,
    linkLabel: String,
    icon: { control: { type: "object" } },
    actions: { control: { type: "object" } },
    type: {control: { type: 'select', options: ['withActions', 'withAccentBorder']}},
    id: String,
  },
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { CAlerts },
  template: '<c-alerts v-bind="$props" />',
});

export const Default = Template.bind({});
Default.args = {
  label: "Private note for Alkama RTC",
  icon: {
    name: "exclamation-circle",
    type: "solid"
  },
    color:'yellow',
    description: 'Nut allergy',
    type: 'withActions',
    actions:{
      label: 'Update'
    },
    id: 'c-alert',
};
