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

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

  const theme = useTheme();
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: theme.colors.primary,
        tabBarPosition: "top",
        headerShown: false,
        animation: "shift",
        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="list" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="documents"
        options={{
          title: t("jobdetail.labels.documents"),
          tabBarIcon: ({ color }) => (
            <FontAwesome size={28} name="photo" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="notes"
        options={{
          title: t("jobdetail.labels.notes"),
          tabBarIcon: ({ color }) => (
            <FontAwesome size={28} name="sticky-note" color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

export default JobTabLayout;