import React from "react";
import { View, Pressable, Image } from "react-native";
import { Link } from "expo-router";
import { ROUTES } from "~/lib/routes";
import { useAuthWithProfile } from "~/lib/hooks/useAuthWithProfile";
import { Icons } from "~/assets/icons";

function SendMoneyBar() {
  const { user, profile, profileLoading } = useAuthWithProfile();
  const fullName = profile?.fullName;
  const firstName = fullName?.split(" ")[0];
  const avatarSource = profile?.photoUrl
    ? { uri: profile.photoUrl }
    : Icons.avatar;

  return (
    <View className="flex flex-row items-center justify-between py-4 px-5 w-full">
      <View className="flex flex-row w-full justify-end space-x-3">
        <View className="w-2" />
        <Link href={ROUTES.PROFILE} asChild>
          <Pressable className="rounded-full overflow-hidden  ml-3">
            <Image
              source={avatarSource}
              style={[
                { width: 38, height: 38, borderRadius: 19 },
                !profile?.photoUrl ? { tintColor: "#FFB668" } : null,
              ]}
              resizeMode="cover"
            />
          </Pressable>
        </Link>
      </View>
    </View>
  );
}

export default SendMoneyBar;