import React from 'react';

import { Toast, VStack, ToastTitle, ToastDescription, Pressable, Icon, CloseIcon } from '@gluestack-ui/themed';

interface IToast {
    id: string;
    title: string;
    status?: any;
    description?: string;
    isClosable?: boolean;
    toast?: any;
    variant?: any;
}

// variants:
// accent,
// solid,
// outline

export const ToastAlert = ({
    id,
    status = 'info',
    title = '',
    description = '',
    variant = 'solid',
    isClosable,
    toast = null,
}: IToast) => {
    const toastId = 'toast-' + id;
    const actionType = status || 'info';
    return (
        <Toast nativeID={toastId} variant={variant} action={actionType}>
            <VStack space="xs">
                <ToastTitle>{title}</ToastTitle>
                {description && <ToastDescription>{description}</ToastDescription>}
            </VStack>
            {isClosable && toast ? (
                <Pressable mt="$1" onPress={() => toast?.close(id)}>
                    <Icon as={CloseIcon} color="$coolGray50" />
                </Pressable>
            ) : null}
        </Toast>
    );
};