import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import type { ReactNode } from "react";
import type { NavItem, NavKey } from "../../config";
import "./index.css";

const ACTIVE_COLOR = "#1976d2";
const DEFAULT_COLOR = "#9e9e9e";
const ICON_SIZE = 24;

interface BottomNavProps {
  active: NavKey;
  navItems: NavItem[];
  children?: ReactNode;
}

export default function BottomNav({ active, navItems, children }: BottomNavProps) {
  const handleNavigate = (item: NavItem) => {
    if (item.key === active) return;
    Taro.redirectTo({ url: item.path });
  };

  return (
    <View className="bottom-nav-wrapper">
      <View className="bottom-nav-content">{children}</View>
      <View className="bottom-nav">
      {navItems.map((item) => {
        const isActive = active === item.key;
        const IconComp = item.icon;
        const iconColor = isActive ? ACTIVE_COLOR : DEFAULT_COLOR;
        return (
          <View
            key={item.key}
            className={`bottom-nav-item${isActive ? " active" : ""}`}
            onClick={() => handleNavigate(item)}
          >
            <IconComp size={ICON_SIZE} color={iconColor} />
            <Text className="bottom-nav-label">{item.label}</Text>
          </View>
        );
      })}
      </View>
    </View>
  );
}