import React, { useState } from "react";
import { View, Text, StyleSheet } from "react-native";
import { FAB, Portal, Provider } from "react-native-paper";
import Tooltip from "react-native-walkthrough-tooltip";
import { MaterialIcons } from '@react-native-vector-icons/material-icons';

export default function GroupScreen() {
  const [tooltipVisible, setTooltipVisible] = useState(false);

  return (
    <Provider>
      <View style={styles.container}>
        <Text style={styles.title}>Groups</Text>


    <FAB
      style={styles.fab}
      icon={() => <MaterialIcons name="group-add" size={24} color="#eb87a3ff" />}
      onPress={() => setTooltipVisible(true)}
    />


      </View>
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#dae4ed",
    padding: 16,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  fab: {
    position: "absolute",
    right: 20,
    bottom: 90,
    width: 70,
    height: 70,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#dae4ed",
    borderRadius: 60,
  },
  tooltipText: {
    color: "#fff",
    fontSize: 14,
    fontWeight: "500",
  },
});