import { router } from 'expo-router';
import React from 'react';
import { I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Feather as Icon } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { colors, spacing, typography } from '../../../theme';

type ProfileHeaderProps = {
  name: string;
  role: string;
};

const ProfileHeader = ({ name, role }: ProfileHeaderProps) => {
  const { t } = useTranslation('profile');

  const backIcon = I18nManager.isRTL ? 'chevron-right' : 'chevron-left';

  return (
    <>
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()}>
          <Icon name={backIcon} size={26} color={colors.textPrimary} />
        </TouchableOpacity>

        <Text style={styles.headerTitle}>
          {t('headerTitle', 'Mon Profil')}
        </Text>

        <View style={styles.placeholder} />
      </View>

      <View style={styles.avatarWrapper}>
        <Icon name="user" size={80} color={colors.primary} />
        <TouchableOpacity style={styles.cameraBtn}>
          <Icon name="camera" size={16} color={colors.white} />
        </TouchableOpacity>
      </View>

      <Text style={styles.name}>{name}</Text>
      <Text style={styles.role}>{role}</Text>
    </>
  );
};

export default ProfileHeader;

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: spacing.md,
  },
  headerTitle: {
    flex: 1,
    textAlign: 'center',
    fontSize: typography.fontSize.lg,
    fontWeight: typography.fontWeight.bold,
    color: colors.textPrimary,
  },
  placeholder: {
    width: 30,
  },
  avatarWrapper: {
    alignSelf: 'center',
    width: 120,
    height: 120,
    marginTop: spacing.sm,
    borderRadius: 60,
    backgroundColor: '#E0E7FF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  cameraBtn: {
    position: 'absolute',
    bottom: 6,
    right: 8,
    backgroundColor: colors.primary,
    width: 30,
    height: 30,
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center',
  },
  name: {
    textAlign: 'center',
    marginTop: spacing.sm,
    fontSize: typography.fontSize.md,
    fontWeight: typography.fontWeight.bold,
    color: colors.textPrimary,
  },
  role: {
    textAlign: 'center',
    color: colors.textSecondary,
    marginBottom: spacing.md,
  },
});