import Feather from "@expo/vector-icons/Feather";
import * as Haptics from "expo-haptics";
import { useNavigation } from "expo-router";
import {
  Icon,
  Label,
  NativeTabs,
  VectorIcon,
} from "expo-router/unstable-native-tabs";
import React, { useEffect, useRef } from "react";

export default function TabLayout() {
  const navigation = useNavigation();
  const isInitial = useRef(true);

  useEffect(() => {
    const unsubscribe = navigation.addListener("state", () => {
      if (isInitial.current) {
        isInitial.current = false;
        return;
      }
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    });
    return unsubscribe;
  }, [navigation]);

  return (
    <NativeTabs>
      <NativeTabs.Trigger name="home">
        <Label>Home</Label>
        <Icon
          sf={{ default: "house", selected: "house.fill" }}
          androidSrc={<VectorIcon family={Feather} name="home" />}
        />
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="explore">
        <Label>Durchsuchen</Label>
        <Icon
          sf="magnifyingglass"
          androidSrc={<VectorIcon family={Feather} name="search" />}
        />
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}