import React, { ComponentProps } from "react";
import { Meta, StoryFn } from "@storybook/react";
import { Toast, ToastAction } from "../ui/toast";
import { Toaster } from "../ui/toaster";
import { Button } from "../ui/button";
import { Flex } from "../ui/flex";
import { useToast } from "../../hooks/use-toast";

export default {
  title: "Components/Toast",
  component: Toast,
  argTypes: {},
} as Meta<typeof Toast>;

const ToastStory: StoryFn<ComponentProps<typeof Toast>> = () => {
  const { toast } = useToast();

  return (
    <Flex>
      <Button
        variant="secondary"
        onClick={() => {
          toast({
            title: "Scheduled: Catch up ",
            description: "Friday, February 10, 2023 at 5:57 PM",
            action: (
              <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
            ),
          });
        }}
      >
        Add to calendar
      </Button>
      <Toaster></Toaster>
    </Flex>
  );
};

export const DefaultToast = ToastStory.bind({});
DefaultToast.args = {};