import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import { Avatar } from '@/components/ui/Avatar'

interface MemberCardProps {
  member: {
    id: string
    name: string
    betrieb: string
    sparte: string
    ort: string
    istAusbildungsbetrieb: boolean
    avatarUrl: string | null
  }
  onPress: () => void
}

export function MemberCard({ member, onPress }: MemberCardProps) {
  return (
    <TouchableOpacity onPress={onPress} style={styles.card} activeOpacity={0.76}>
      <Avatar name={member.name} imageUrl={member.avatarUrl ?? undefined} size={48} />

      <View style={styles.info}>
        <Text style={styles.name} numberOfLines={1}>
          {member.name}
        </Text>
        <Text style={styles.company} numberOfLines={1}>
          {member.betrieb}
        </Text>
        <View style={styles.tagsRow}>
          <View style={styles.tag}>
            <Text style={styles.tagText}>{member.sparte}</Text>
          </View>
          <Text style={styles.separator}>·</Text>
          <Text style={styles.location}>{member.ort}</Text>
          {member.istAusbildungsbetrieb && (
            <View style={styles.ausbildungTag}>
              <Text style={styles.ausbildungText}>Ausbildung</Text>
            </View>
          )}
        </View>
      </View>

      <Ionicons name="chevron-forward" size={18} color="#D4D4D8" />
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    padding: 14,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    shadowColor: '#1C1917',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 12,
    elevation: 3,
  },
  info: {
    flex: 1,
    minWidth: 0,
  },
  name: {
    fontSize: 15,
    fontWeight: '600',
    color: '#0F172A',
    letterSpacing: -0.2,
  },
  company: {
    fontSize: 13,
    color: '#475569',
    marginTop: 2,
  },
  tagsRow: {
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap',
    gap: 6,
    marginTop: 6,
  },
  tag: {
    backgroundColor: '#F4F4F5',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 99,
  },
  tagText: {
    fontSize: 11,
    color: '#475569',
    fontWeight: '500',
  },
  separator: {
    fontSize: 11,
    color: '#D4D4D8',
  },
  location: {
    fontSize: 11,
    color: '#64748B',
  },
  ausbildungTag: {
    backgroundColor: '#F0FDF4',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 99,
  },
  ausbildungText: {
    fontSize: 11,
    color: '#15803D',
    fontWeight: '600',
  },
})