/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react';
import figma from '@figma/code-connect';
import { useToast } from './toastProvider';
import type { ReactMeta } from '@figma/code-connect/dist/react/types';

const toastMetaProps: ReactMeta<{
    variant: 'success' | 'warning' | 'error' | 'info';
    toastCopy: string;
}>['props'] = {
    variant: figma.enum('Type', {
        Success: 'success',
        Info: 'info',
        Warning: 'warning',
        Error: 'error',
    }),
    toastCopy: figma.textContent('Toast Copy'),
};

figma.connect(
    useToast,
    'https://www.figma.com/design/VcuUJ7XAoYmszBropmeUgL/Toasts?node-id=1758-227',
    {
        props: toastMetaProps,
        example: ({ variant, toastCopy }) => {
            const toast = useToast();

            return (
                <button
                    onClick={() => {
                        toast(toastCopy, { variant });
                    }}
                >
                    Button Text
                </button>
            ); // Toast is rendered by ToastContainer
        },
    }
);