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

export default function ChallengeCard({ challenge }: { challenge: Challenge }) {
  return (
    <Surface elevation={2} style={{ flex: 1, margin: 20, borderRadius: 20 }}>
    <View style={{ padding: 10 }}>
      <Text variant='headlineMedium' style={{ textAlign: 'center' }}>{challenge.title}</Text>
    </View>
    <View style={{ flexGrow: 1 }}>
      <Surface elevation={5} mode='flat' style={{ flexGrow: 1, padding: 15 }}>
        <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 }}>
      <Button mode='outlined' icon='cancel'>
        Passer
      </Button>
      <Button mode='contained' icon='check'>
        Terminer
      </Button>
    </View>
  </Surface>
  )
}