import { Tabs } from "expo-router";
import { GlassTabBar } from "@/components/glass";
import { House, Compass, UserCircle } from "phosphor-react-native";
import type { ColorValue } from "react-native";

export default function TabLayout() {
  return (
    <Tabs
      tabBar={(props) => <GlassTabBar {...props} />}
      screenOptions={{
        headerShown: false,
        tabBarStyle: { display: "none" },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Créations",
          tabBarIcon: ({ color, size }: { color: ColorValue; size: number }) => (
            <House size={size} color={color as string} weight="light" />
          ),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "Explorer",
          tabBarIcon: ({ color, size }: { color: ColorValue; size: number }) => (
            <Compass size={size} color={color as string} weight="light" />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: "Profil",
          tabBarIcon: ({ color, size }: { color: ColorValue; size: number }) => (
            <UserCircle size={size} color={color as string} weight="light" />
          ),
        }}
      />
    </Tabs>
  );
}