import { StyleSheet } from 'react-native';
import { ThemeColors } from '../../theme';

export const getStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    container: {
      alignItems: 'center',
      paddingVertical: 24,
      paddingHorizontal: 16,
      borderBottomWidth: 1,
      borderBottomColor: colors.border,
      backgroundColor: colors.card,
    },
    avatar: {
      width: 80,
      height: 80,
      borderRadius: 40,
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: 16,
    },
    avatarText: {
      fontSize: 32,
      fontWeight: '700',
      color: '#FFFFFF',
    },
    nameRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 12,
      flexWrap: 'wrap',
      paddingHorizontal: 16,
    },
    name: {
      fontSize: 24,
      fontWeight: '700',
      color: colors.text,
      marginRight: 8,
    },
    statusBadge: {
      paddingHorizontal: 12,
      paddingVertical: 6,
      borderRadius: 16,
    },
    statusText: {
      fontSize: 13,
      fontWeight: '600',
      textTransform: 'capitalize',
    },
    company: {
      fontSize: 16,
      color: colors.textSecondary,
      marginBottom: 12,
      textAlign: 'center',
    },
    contactRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 8,
      paddingHorizontal: 16,
    },
    contactLabel: {
      fontSize: 14,
      fontWeight: '600',
      color: colors.text,
      marginRight: 8,
      minWidth: 50,
    },
    contactText: {
      fontSize: 14,
      color: colors.textSecondary,
      flex: 1,
    },
    iconButton: {
      marginLeft: 8,
      padding: 4,
    },
  });