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

export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
        headerTitleAlign: "center",
        headerStyle: {
          height: 48,
          elevation: 0,
          shadowOpacity: 0,
          backgroundColor: "#fff",
        },
        headerTitleStyle: {
          fontSize: 16,
          fontWeight: "600",
        },
        headerShadowVisible: false,
        tabBarActiveTintColor: "#1d4ed8",
        tabBarStyle: {
          height: 52,
          paddingTop: 4,
          paddingBottom: 4,
          backgroundColor: "#fff",
          borderTopWidth: 0.5,
          borderTopColor: "#e5e7eb",
        },
        tabBarLabelStyle: {
          fontSize: 11,
          marginTop: -3,
          marginBottom: 1,
        },
        tabBarIconStyle: {
          marginTop: -2,
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "홈",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home-outline" size={18} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="history"
        options={{
          title: "이력",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="time-outline" size={18} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: "설정",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="settings-outline" size={18} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}