/*
 * File: ProfileHeader.tsx
 * Description: Component for displaying user avatar and name
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Colors, Spacing, Typography } from '../../../../shared/src/theme';

interface ProfileHeaderProps {
  user: { name: string; avatar?: string };
}

/**
 * ProfileHeader - displays user avatar and name
 */
const ProfileHeader: React.FC<ProfileHeaderProps> = ({ user }) => (
  <View style={styles.container}>
    {user.avatar && <Image source={{ uri: user.avatar }} style={styles.avatar} />}
    <Text style={styles.name}>{user.name}</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginBottom: Spacing.md,
  },
  avatar: {
    width: 64,
    height: 64,
    borderRadius: 32,
    marginBottom: Spacing.sm,
  },
  name: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.lg,
    color: Colors.primary,
  },
});

export default ProfileHeader;

/*
 * End of File: ProfileHeader.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */