import React from "react";
import { Image } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Stream from "../Stream";
import My from "../My";

const Tab = createBottomTabNavigator();

export default function HomeTab() {
  return (
    <Tab.Navigator
      screenOptions={() => ({
        tabBarActiveTintColor: "#FF669E",
        tabBarInactiveTintColor: "gray",
        tabBarStyle: {
          backgroundColor: "#07050A",
          borderTopColor: "#FFFFFF26",
        },
      })}
    >
      <Tab.Screen
        name="Stream"
        component={Stream}
        options={{
          title: "发现",
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => {
            if (focused) {
              return (
                <Image
                  source={require("../../assets/icon/others/streamfocus.png")}
                />
              );
            } else {
              return (
                <Image
                  source={require("../../assets/icon/others/streamblur.png")}
                />
              );
            }
          },
        }}
      />
      <Tab.Screen
        name="My"
        component={My}
        options={{
          title: "我的",
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => {
            if (focused) {
              return (
                <Image
                  source={require("../../assets/icon/others/myfocus.png")}
                />
              );
            } else {
              return (
                <Image
                  source={require("../../assets/icon/others/myblur.png")}
                />
              );
            }
          },
        }}
      />
    </Tab.Navigator>
  );
}