import FontAwesome from "@expo/vector-icons/FontAwesome";
import { Tabs } from "expo-router";
import { useTranslation } from "react-i18next";

function JobTabLayout() {
  const { t } = useTranslation();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: "blue",
        tabBarPosition: "top",
        headerShown: false,
        tabBarStyle: {
          marginTop: -50,
        },
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: t("jobdetail.labels.job"),
          tabBarIcon: ({ color }) => (
            <FontAwesome size={28} name="home" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="lines"
        options={{
          title: t("jobdetail.labels.lines"),
          tabBarIcon: ({ color }) => (
            <FontAwesome size={28} name="cog" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="documents"
        options={{
          title: t("jobdetail.labels.documents"),
          tabBarIcon: ({ color }) => (
            <FontAwesome size={28} name="cog" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="notes"
        options={{
          title: t("jobdetail.labels.notes"),
          tabBarIcon: ({ color }) => (
            <FontAwesome size={28} name="cog" color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

export default JobTabLayout;