traintrape-moi/client/components/ChallengeCard.tsx

import { Challenge } from "@/utils/features/challenges/challengesSlice"
import { FontAwesome6 } from "@expo/vector-icons"
import { View, ViewStyle } from "react-native"
import { Button, Card, IconButton, MD3Colors, Surface, Text } from "react-native-paper"

export type ChallengeCardProps = {
  challenge: Challenge | null,
  onSuccess?: () => void,
  onFail?: () => void,
  onDelete?: () => void,
  onEdit?: () => void,
  style?: ViewStyle,
}

export default function ChallengeCard({ challenge, onSuccess, onFail, onDelete, onEdit, style }: ChallengeCardProps) {
  return (
    <Surface elevation={2} style={{ ...style, borderRadius: 20 }}>
      <Card.Title
          title={challenge?.title}
          titleStyle={{ textAlign: 'center' }}
          titleVariant='headlineMedium'
          right={(props) => onEdit ? <IconButton {...props} icon='file-document-edit-outline' onPress={() => onEdit()} /> : <></>} />
      <View style={{ flexGrow: 1 }}>
        <Surface elevation={5} mode='flat' style={{ flexGrow: 1, paddingHorizontal: 15, paddingVertical: 20 }}>
          <Text variant='bodyLarge' style={{ flexGrow: 1 }}>{challenge?.description}</Text>
          <Text variant='titleMedium'>
            Récompense : {challenge?.reward} <FontAwesome6 name='coins' />
          </Text>
        </Surface>
      </View>
      <View style={{ flexWrap: 'wrap', flexDirection: 'row', justifyContent: 'space-around', padding: 15 }}>
        {onFail && <Button key='failBtn' mode='outlined' icon='cancel' onPress={() => onFail()}>
          Échouer
        </Button>}
        {onSuccess && <Button key='successBtn' mode='contained' icon='check' onPress={() => onSuccess()}>
          Terminer
        </Button>}
        {onDelete && <Button key='deleteBtn' mode='contained' icon='delete'  onPress={() => onDelete()} buttonColor={MD3Colors.error60} textColor={MD3Colors.secondary10}>
          Supprimer
        </Button>}
      </View>
    </Surface>
  )
}