import type { JSX, ReactNode } from 'react';
import React from 'react';
import { Text, View } from 'react-native';
import BottomSheetDeprecated from '../BottomSheetDeprecated';
import { useTheme } from '../../branding';
import themedStyles from './styles';

interface TooltipProps {
    title: string | JSX.Element;
    text?: string;
    children?: ReactNode;
    isVisible: boolean;
    onClose: () => void;
}

export const Tooltip = ({
    title,
    text,
    children,
    isVisible,
    onClose
}: TooltipProps) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];

    return (
        <BottomSheetDeprecated
            title={title}
            isVisible={isVisible}
            onClose={onClose}
            showCloseButton={false}
        >
            <View style={styles.tooltipContainer}>
                <View style={styles.tooltipContent}>
                    {text ? <Text style={styles.text}>{text}</Text> : children}
                </View>
            </View>
        </BottomSheetDeprecated>
    );
};

export default Tooltip;