import { FunctionComponent, ReactNode } from "react";
import { BasicComponent } from "@/types/typings";
import { Text, View } from "@tarojs/components";
import classNames from "classnames";
import { SafeArea } from "@nutui/nutui-react-taro";

export interface TabBarProps extends BasicComponent {
  value: number;
  onSwitch: (value: number) => void;
  items: TabBarItemProps[];
}

export interface TabBarItemProps extends BasicComponent {
  text: ReactNode;
  iconPath: ReactNode;
  selectedIconPath: ReactNode;
}

export const TabBar: FunctionComponent<TabBarProps> = (props) => {
  const { items, value, onSwitch } = props;
  return (
    <View
      className={
        "fixed bottom-0 box-content flex w-full flex-col border-t border-gray-200 bg-white"
      }
    >
      <View className={"box-content h-12 flex-nowrap items-center"}>
        {items &&
          items.map((item, index) => {
            return (
              <View
                key={index}
                className={
                  "box-content flex size-12 flex-1 flex-col items-center justify-around"
                }
                onClick={() => {
                  onSwitch?.(index);
                }}
              >
                <View className={"h-5 w-5"}>
                  {value === index ? item.selectedIconPath : item.iconPath}
                </View>
                <Text
                  className={classNames("text-xs", {
                    "text-brand-500": value === index,
                  })}
                >
                  {item.text}
                </Text>
              </View>
            );
          })}
      </View>
      <SafeArea position={"bottom"} />
    </View>
  );
};
