import { Animated, Pressable, Text } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";

import { IoniconsName } from "@/types/index";

interface SidebarItemProps {
  paddingLeft: Animated.Value;
  routerPushValue: any;
  isMobile: boolean;
  isActive: (path: string) => boolean;
  iconTranslateX: Animated.Value;
  textOpacity: Animated.Value;
  path: string;
  icon: IoniconsName;
  label: string;
  isFirst?: boolean;
  showLabel?: boolean;
}

export const SidebarItem = ({
  paddingLeft,
  routerPushValue,
  isMobile,
  isActive,
  iconTranslateX,
  textOpacity,
  path,
  icon,
  label,
  isFirst,
  showLabel = true,
}: SidebarItemProps) => {
  return (
    <Animated.View
      style={{
        paddingLeft,
        paddingRight: 8,
      }}
    >
      <Pressable
        onPress={() => router.push(routerPushValue)}
        className={`flex-row items-center py-3 rounded-lg w-full ${
          isFirst && !isMobile ? "mt-4" : isMobile ? "mt-1" : ""
        } ${showLabel ? "justify-start" : "justify-center"}`}
        style={{
          backgroundColor: isActive(path) ? "#5A4570" : "transparent",
        }}
      >
        <Animated.View
          style={{
            alignItems: "center",
            ...(showLabel
              ? { paddingLeft: 8, transform: [{ translateX: iconTranslateX }] }
              : {}),
          }}
        >
          <Ionicons name={icon as IoniconsName} size={24} color="white" />
        </Animated.View>
        {showLabel && (
          <Animated.View
            style={{
              opacity: textOpacity,
              marginLeft: 12,
              overflow: "hidden",
            }}
          >
            <Text
              className={`${
                isActive(path) ? "text-white font-medium" : "text-gray-300"
              }`}
              numberOfLines={1}
            >
              {label}
            </Text>
          </Animated.View>
        )}
      </Pressable>
    </Animated.View>
  );
};