import { TouchableOpacity } from 'react-native';
import { Heading, HStack, Icon, Text, VStack } from '@gluestack-ui/themed';
import { LogOut } from 'lucide-react-native';

import { UserPhoto } from './UserPhoto';

import defaultAvatar from '@assets/userPhotoDefault.png';

import { api } from '@services/api';

import { useAuth } from '@hooks/useAuth';

export function HomeHeader() {
  const {
    user: { name, avatar },
    signOut,
  } = useAuth();

  return (
    <HStack bg="$gray600" pt="$16" pb="$5" px="$8" alignItems="center" gap="$4">
      <UserPhoto
        source={avatar ? { uri: `${api.defaults.baseURL}/avatar/${avatar}` } : defaultAvatar}
        alt="avatar image"
        h="$16"
        w="$16"
      />

      <VStack flex={1}>
        <Text color="$gray100" fontSize="$sm">
          Olá,
        </Text>

        <Heading color="$gray100" fontSize="$md">
          {name}
        </Heading>
      </VStack>

      <TouchableOpacity onPress={signOut}>
        <Icon as={LogOut} color="$gray200" size="xl" />
      </TouchableOpacity>
    </HStack>
  );
}
