import { View, Text } from '@tarojs/components';
import { useNavigate } from '@tarojs/taro';

interface NavBarProps {
  title: string;
  onBack?: () => void;
  rightText?: string;
  onRightClick?: () => void;
}

export default function NavBar({ title, onBack, rightText, onRightClick }: NavBarProps) {
  const navigate = useNavigate();

  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      navigate(-1);
    }
  };

  return (
    <View className="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200">
      <View className="flex items-center flex-1" onClick={handleBack}>
        <Text className="text-lg mr-2">←</Text>
        <Text className="text-base font-medium truncate">{title}</Text>
      </View>
      {rightText && (
        <View onClick={onRightClick}>
          <Text className="text-sm text-blue-500">{rightText}</Text>
        </View>
      )}
    </View>
  );
}