import { useState } from 'react';
import { TouchableOpacity, View } from 'react-native';
import { Icon, Text } from '../../../components';
import { tw } from '../../../core';

interface InfoTooltipProps {
  text: string;
}

export function InfoTooltip({ text }: InfoTooltipProps) {
  const [visible, setVisible] = useState(false);
  const toggle = () => setVisible(v => !v);
  const icon = <Icon name="info" size={17} color="#0CC4FE" />;

  if (!visible) {
    return (
      <TouchableOpacity style={tw`px-2`} onPress={toggle}>
        {icon}
      </TouchableOpacity>
    );
  }

  return (
    <View style={tw`flex-row`}>
      <TouchableOpacity onPress={toggle} style={tw`absolute right-0 bg-white rounded p-2 flex-row items-center gap-1`}>
        {icon}
        <Text style={tw`text-black`}>{text}</Text>
      </TouchableOpacity>
    </View>
  );
}