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

interface SidebarToggleProps {
  textOpacity?: Animated.Value;
  iconTranslateX?: Animated.Value;
  onPress: () => void;
  showLabel?: boolean;
  size?: number;
  color?: string;
  className?: string;
}

export const SidebarToggle = ({
  textOpacity,
  iconTranslateX,
  onPress,
  showLabel = false,
  size = 24,
  color = "white",
  className = "",
}: SidebarToggleProps) => {
  return (
    <Animated.View
      style={{
        paddingRight: showLabel ? 4 : 8,
        paddingLeft: showLabel ? 16 : 8,
      }}
    >
      <Pressable
        onPress={onPress}
        className={`flex-row items-center rounded-lg ${className}`}
      >
        <Animated.View
          style={{
            alignItems: "center",
            justifyContent: "center",
            ...(showLabel && iconTranslateX !== undefined
              ? { transform: [{ translateX: iconTranslateX }] }
              : { width: "100%" }),
          }}
        >
          <Ionicons name="menu" size={size} color={color} />
        </Animated.View>
        {showLabel && (
          <Animated.View
            style={{
              ...(textOpacity !== undefined ? { opacity: textOpacity } : {}),
              overflow: "hidden",
            }}
          >
            <Text className="text-white text-lg ml-2" numberOfLines={1}>
              Options
            </Text>
          </Animated.View>
        )}
      </Pressable>
    </Animated.View>
  );
};