import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { Toast, ThemeProviderWithStyledEngine, Button } from "../";

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Feedback/Toast",
  component: Toast,
  decorators: [decorator],
  argTypes: {
    onClose: {
      table: {
        disable: true,
      },
    },
  },
} satisfies Meta<typeof Toast>;

export default meta;

const Template: StoryFn<typeof Toast> = (args) => {
  return (
    <Toast {...args}>
      <Button
        ESCAPE_className="self-start mt-4"
        onClick={() => alert("Try again")}
      >
        Try again
      </Button>
    </Toast>
  );
};

export const Default: StoryFn<typeof Toast> = Template.bind({});

Default.args = {
  title: "Hello, World!",
  severity: "success",
};
