import React from "react";
import { View } from "react-native";
import { Button } from "~/components/ui/button";
import { ArrowLeft } from "lucide-react-native";
import { router, useNavigation } from "expo-router";
import { useTabStore } from "~/lib/stores";

interface BackButtonProps {
  onPress?: () => void;
  className?: string;
  iconSize?: number;
  iconColor?: string;
}

export default function BackButton({
  onPress,
  className = "flex flex-row justify-start w-full pr-4",
  iconSize = 24,
  iconColor = "text-primary",
}: BackButtonProps) {
  const { lastVisitedTab } = useTabStore();
  const navigation = useNavigation();

  const handlePress = () => {
    if (onPress) {
      onPress();
    } else {
      router.back();
    }
  };

  return (
    <View className={className}>
      <Button
        className="bg-transparent border border-black m-4 rounded-[8px]"
        onPress={handlePress}
      >
        <ArrowLeft className={iconColor} size={iconSize} />
      </Button>
    </View>
  );
}