import React from 'react';
import { Toast, ToastProps } from '../../../react/src/components/Toast';

export default {
    title: 'Components/Toast',
    component: Toast,
    argTypes: {
        onClose: {
            action: 'onClose',
            table: { disable: true },
        },
        position: {
            options: ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],
            control: 'select',
        },
    },
    parameters: {
        layout: 'centered',
        docs: {
            description: {
                story: 'The toast component is a versatile and user- friendly element that allows you to display important messages or notifications to your users.It provides a non- intrusive way to convey information, such as success messages, error alerts, or general notifications.With customizable features, you can easily configure the appearance, duration, and position of the toast to fit your application s needs.Whether it s providing feedback, notifying users about updates, or displaying error messages, the toast component is an effective and intuitive tool to enhance the user experience of your application.',
            },
        },
    },
} as Meta<ToastProps>;

const CustomToast: React.FC<ToastProps> = (args) => (
    <div style={{ height: '190px' }}>
        <Toast {...args} />
    </div>
);

export const Primary = CustomToast.bind({});
Primary.args = {
    title: 'Appointment booked',
    text: 'Wednesday, March 21st at 8:00 PM',
    show: true,
    position: 'top-right',
};