import React from "react";
import {
  Icon,
  Label,
  NativeTabs,
  VectorIcon,
} from "expo-router/unstable-native-tabs";
import { useColorScheme } from "@/lib/useColorScheme";
import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";

export default function TabLayout() {
  const { colors } = useColorScheme();
  return (
    <NativeTabs backgroundColor={colors.grey6} minimizeBehavior="onScrollDown">
      <NativeTabs.Trigger name="(home)">
        <Icon
          sf="house.fill"
          androidSrc={
            <VectorIcon family={MaterialCommunityIcons} name="home" />
          }
        />
        <Label>Home</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="(lists)">
        <Icon
          sf="list.clipboard.fill"
          androidSrc={
            <VectorIcon family={MaterialCommunityIcons} name="clipboard-list" />
          }
        />
        <Label>Lists</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="(tags)">
        <Icon
          sf="tag.fill"
          androidSrc={<VectorIcon family={MaterialCommunityIcons} name="tag" />}
        />
        <Label>Tags</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="(highlights)">
        <Icon
          sf="highlighter"
          androidSrc={
            <VectorIcon family={MaterialCommunityIcons} name="marker" />
          }
        />
        <Label>Highlights</Label>
      </NativeTabs.Trigger>

      <NativeTabs.Trigger name="(settings)">
        <Icon
          sf="gearshape.fill"
          androidSrc={<VectorIcon family={MaterialCommunityIcons} name="cog" />}
        />
        <Label>Settings</Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  );
}