import { UserResponse } from "@/api/types";
import { router } from "expo-router";
import { StyleSheet, View } from "react-native";
import { Avatar, AvatarFallbackText } from "./ui/avatar";
import { Button, ButtonText } from "./ui/button";
import Panel from "./ui/panel";
import { ThemedText } from "./ui/themed-text";
interface UserHeaderProps {
  user?: UserResponse
}

const UserHeader = ({ user }: UserHeaderProps) => {
  return (
    <Panel>
      {user && (
        <View className="flex-row">
          <Avatar className="bg-indigo-600 me-3">
            <AvatarFallbackText className="text-white">
              {user.username}
            </AvatarFallbackText>
          </Avatar>
          <View>
            <ThemedText type="subtitle">Welcome, {user.username}</ThemedText>
            <ThemedText>{user.type}</ThemedText>
          </View>
        </View>
      )}
      {!user && (
        <>
          <ThemedText type="subtitle">Hello, Guest</ThemedText>
          <ThemedText style={styles.unathorizedText}>Please log in to proceed.</ThemedText>
          <Button variant="solid" size="md" onPress={() => router.push("/login")}>
            <ButtonText>Login</ButtonText>
          </Button>
        </>
      )}
      
    </Panel>
  )
}

const styles = StyleSheet.create({
  unathorizedText: {
    marginBottom: 10
  }
});

export default UserHeader;