import type { Meta, StoryObj } from '@storybook/react';
import { Toaster, toast } from 'sonner';
import { Button } from '../button';
import React from 'react';

const meta: Meta<typeof Toaster> = {
  title: 'UI/Sonner',
  component: Toaster,
  render: args => <Toaster {...args} />,
};

export default meta;
type Story = StoryObj<typeof Toaster>;

export const Default: Story = {
  render: () => (
    <div className="flex flex-wrap gap-2">
      <Toaster position="top-right" richColors />
      <Button
        variant="outline"
        onClick={() =>
          toast('Event has been created', {
            description: 'Sunday, December 03, 2023 at 9:00 AM',
            action: {
              label: 'Undo',
              onClick: () => console.log('Undo'),
            },
          })
        }
      >
        Show Toast
      </Button>
      <Button variant="outline" onClick={() => toast.success('Successfully saved!')}>
        Success
      </Button>
      <Button variant="outline" onClick={() => toast.error('An error occurred.')}>
        Error
      </Button>
    </div>
  ),
};