import { TouchableOpacity, Text, ActivityIndicator, StyleSheet } from 'react-native'

interface AnmeldeButtonProps {
  terminId: string
  isAngemeldet: boolean
  onToggle: () => void
  isLoading: boolean
}

export function AnmeldeButton({ isAngemeldet, onToggle, isLoading }: AnmeldeButtonProps) {
  return (
    <TouchableOpacity
      onPress={onToggle}
      disabled={isLoading}
      style={[
        styles.btn,
        isAngemeldet ? styles.btnRegistered : styles.btnRegister,
        isLoading && styles.disabled,
      ]}
      activeOpacity={0.82}
    >
      {isLoading ? (
        <ActivityIndicator color={isAngemeldet ? '#52525B' : '#FFFFFF'} />
      ) : (
        <Text style={[styles.label, isAngemeldet && styles.labelRegistered]}>
          {isAngemeldet ? '✓ Angemeldet – Abmelden' : 'Jetzt anmelden'}
        </Text>
      )}
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  btn: {
    borderRadius: 14,
    paddingVertical: 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnRegister: {
    backgroundColor: '#003B7E',
    shadowColor: '#003B7E',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.24,
    shadowRadius: 10,
    elevation: 5,
  },
  btnRegistered: {
    backgroundColor: '#F4F4F5',
    borderWidth: 1,
    borderColor: '#E2E8F0',
  },
  disabled: {
    opacity: 0.5,
  },
  label: {
    fontSize: 15,
    fontWeight: '600',
    color: '#FFFFFF',
    letterSpacing: 0.2,
  },
  labelRegistered: {
    color: '#52525B',
  },
})

