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

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

const meta = {
  title: "Components/Feedback/Snackbar",
  component: Snackbar,
  decorators: [decorator],
} satisfies Meta<typeof Snackbar>;

export default meta;

const Template: StoryFn<typeof Snackbar> = (args) => (
  <Snackbar
    onClose={() => {}}
    actionText={args.actionText}
    onAction={() => {}}
    progress={args.progress}
  >
    {args.children}
  </Snackbar>
);

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

Default.args = {
  progress: 50,
  actionText: "Undo",
  children: "Something happened",
};
