import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

export default function Layout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,

        tabBarActiveTintColor: "#0E8A61",
        tabBarInactiveTintColor: "#9CA3AF",

        tabBarStyle: {
          position: "absolute",
          bottom: 5,
          left: 20,
          right: 20,

          height: 82,

          borderRadius: 25,

          backgroundColor: "#FFFFFF",

          borderTopWidth: 0,

          shadowColor: "#000",
          shadowOffset: {
            width: 0,
            height: 10,
          },

          shadowOpacity: 0.08,
          shadowRadius: 10,

          elevation: 10,

          paddingHorizontal: 10,
        },

        tabBarLabelStyle: {
          fontSize: 11,
          fontWeight: "400",
          marginBottom: 8,
        },

        tabBarItemStyle: {
          paddingTop: 6,
          paddingBottom: 4,
          borderRadius: 18,
          marginVertical: 6,
          marginHorizontal: 4,
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Inicio",
          tabBarIcon: ({ focused, color }) => (
            <Ionicons
              name={focused ? "home" : "home-outline"}
              size={focused ? 28 : 24}
              color={color}
            />
          ),
        }}
      />

      <Tabs.Screen
        name="alerts"
        options={{
          title: "Alertas",
          tabBarIcon: ({ focused, color }) => (
            <Ionicons
              name={focused ? "notifications" : "notifications-outline"}
              size={focused ? 28 : 24}
              color={color}
            />
          ),
        }}
      />

      <Tabs.Screen
        name="guide"
        options={{
          title: "Guía",
          tabBarIcon: ({ focused, color }) => (
            <Ionicons
              name={focused ? "leaf" : "leaf-outline"}
              size={focused ? 28 : 24}
              color={color}
            />
          ),
        }}
      />

      <Tabs.Screen
        name="profile"
        options={{
          title: "Perfil",
          tabBarIcon: ({ focused, color }) => (
            <Ionicons
              name={focused ? "person" : "person-outline"}
              size={focused ? 28 : 24}
              color={color}
            />
          ),
        }}
      />
    </Tabs>
  );
}
