push

innungsapp/apps/mobile/components/termine/AnmeldeButton.tsx

@@ -5,25 +5,29 @@ interface AnmeldeButtonProps {
   isAngemeldet: boolean
   onToggle: () => void
   isLoading: boolean
+  maxTeilnehmer?: number | null
+  teilnehmerAnzahl?: number
 }
 
-export function AnmeldeButton({ isAngemeldet, onToggle, isLoading }: AnmeldeButtonProps) {
+export function AnmeldeButton({ isAngemeldet, onToggle, isLoading, maxTeilnehmer, teilnehmerAnzahl = 0 }: AnmeldeButtonProps) {
+  const isFull = !isAngemeldet && !!maxTeilnehmer && teilnehmerAnzahl >= maxTeilnehmer
+
   return (
     <TouchableOpacity
       onPress={onToggle}
-      disabled={isLoading}
+      disabled={isLoading || isFull}
       style={[
         styles.btn,
-        isAngemeldet ? styles.btnRegistered : styles.btnRegister,
-        isLoading && styles.disabled,
+        isAngemeldet ? styles.btnRegistered : isFull ? styles.btnFull : styles.btnRegister,
+        (isLoading || isFull) && styles.disabled,
       ]}
       activeOpacity={0.82}
     >
       {isLoading ? (
         <ActivityIndicator color={isAngemeldet ? '#52525B' : '#FFFFFF'} />
       ) : (
-        <Text style={[styles.label, isAngemeldet && styles.labelRegistered]}>
-          {isAngemeldet ? '✓ Angemeldet – Abmelden' : 'Jetzt anmelden'}
+        <Text style={[styles.label, (isAngemeldet || isFull) && styles.labelRegistered]}>
+          {isAngemeldet ? '✓ Angemeldet – Abmelden' : isFull ? 'Ausgebucht' : 'Jetzt anmelden'}
         </Text>
       )}
     </TouchableOpacity>
@@ -51,6 +55,11 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#E2E8F0',
   },
+  btnFull: {
+    backgroundColor: '#F4F4F5',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+  },
   disabled: {
     opacity: 0.5,
   },