import { Tabs } from "expo-router";
import { MaterialIcons } from "@expo/vector-icons";
import { TodosProvider } from "@/store/todoProvider";

export default function TabLayout() {
  return (
    <TodosProvider>
      <Tabs
        screenOptions={{
          headerShown: false,
          tabBarStyle: { height: 56 },
          tabBarLabelStyle: { fontSize: 12 },
          tabBarHideOnKeyboard: true,
        }}
      >
        <Tabs.Screen
          name="index"
          options={{
            title: "할 일",
            tabBarIcon: ({ color, focused, size }) => (
              <MaterialIcons
                name={focused ? "check-box" : "check-box-outline-blank"}
                size={size ?? 24}
                color={color}
              />
            ),
          }}
        />
        <Tabs.Screen
          name="done"
          options={{
            title: "완료됨",
            tabBarIcon: ({ color, focused, size }) => (
              <MaterialIcons
                name={focused ? "done-all" : "done"}
                size={size ?? 24}
                color={color}
              />
            ),
          }}
        />
      </Tabs>
    </TodosProvider>
  );
}