Untitled

import React from "react";
import Alert from "./Alert"; // Assuming Alert is the HOC you've created

export default {
  title: "Components/Alert",
  component: Alert,
  argTypes: {
    type: {
      control: { type: "select" },
      options: ["warning", "error", "success"],
    },
    variant: {
      control: { type: "select" },
      options: ["single-line", "multiple-line", "multi-line-collapsible"],
    },
    title: { control: "text" },
    description: { control: "text" },
    image: { control: "text" },
    bgColor: { control: "color" },
  },
};

const Template = (args) => <Alert {...args} />;

export const SingleWarning = Template.bind({});
SingleWarning.args = {
  type: "warning",
  variant: "single-line",
  title: "There is a problem with the case.",
  description: "Error message: Currency 'BAM' not available. Could not convert the respective values.",
  bgColor: "#FFF8E1",
};

export const MultipleWarningCollapsed = Template.bind({});
MultipleWarningCollapsed.args = {
  type: "warning",
  variant: "multi-line-collapsible",
  title: "There is a problem with the case. Please see error messages.",
  description: "",
  bgColor: "#FFF8E1",
};

export const MultipleWarningExpanded = Template.bind({});
MultipleWarningExpanded.args = {
  type: "warning",
  variant: "multiple-line",
  title: "There is a problem with the case. Please see error messages.",
  description: "Error message: Currency 'BAM' not available. Could not convert the respective values.\nError message: 502 response failed.",
  bgColor: "#FFF8E1",
};

export const SingleError = Template.bind({});
SingleError.args = {
  type: "error",
  variant: "single-line",
  title: "Headline.",
  description: "Error message: single line.",
  bgColor: "#FFEBEE",
};

export const MultipleErrorCollapsed = Template.bind({});
MultipleErrorCollapsed.args = {
  type: "error",
  variant: "multi-line-collapsible",
  title: "Headline. Please see error messages.",
  description: "",
  bgColor: "#FFEBEE",
};

export const MultipleErrorExpanded = Template.bind({});
MultipleErrorExpanded.args = {
  type: "error",
  variant: "multiple-line",
  title: "Headline. Please see error messages.",
  description: "Error message: details...\nError message: details...",
  bgColor: "#FFEBEE",
};

export const SuccessMessage = Template.bind({});
SuccessMessage.args = {
  type: "success",
  variant: "single-line",
  title: "Good job.",
  description: "Success message goes here.",
  bgColor: "#E8F5E9",
};