traintrape-moi/client/components/PenalyBanner.tsx

import { useGame } from "@/hooks/useGame"
import { FontAwesome6 } from "@expo/vector-icons"
import { useEffect, useMemo, useState } from "react"
import { View } from "react-native"
import { Banner, MD3Colors, ProgressBar, Text } from "react-native-paper"

export default function PenaltyBanner() {
  const game = useGame()
  const penaltyEnd = game.penaltyEnd
  const hasPenalty = penaltyEnd !== null
  const penaltyEndDate = useMemo(() => new Date(penaltyEnd || 0), [penaltyEnd])
  const penaltyEndPretty = penaltyEndDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
  const [remainingTime, setRemainingTime] = useState(0)
  const prettyRemainingTime = useMemo(() => `${Math.floor(remainingTime / 60).toString().padStart(2, '0')}:${Math.floor(remainingTime % 60).toString().padStart(2, '0')}`, [remainingTime])
  const iconName = useMemo(() => {
    switch (Math.abs(remainingTime % 4)) {
      case 0: return 'hourglass-empty'
      case 1: return 'hourglass-end'
      case 2: return 'hourglass-half'
      case 3: return 'hourglass-start'
    }
  }, [remainingTime])

  useEffect(() => {
    if (!hasPenalty)
      return
    const interval = setInterval(() => setRemainingTime(Math.floor((penaltyEndDate.getTime() - new Date().getTime()) / 1000)), 1000)
    return () => clearInterval(interval)
  }, [hasPenalty, penaltyEndDate])

  return (
    <View>
      <Banner
          visible={hasPenalty}
          icon={({ size }) => <FontAwesome6 name={iconName} size={size} color={MD3Colors.tertiary80} />}
          style={{ backgroundColor: MD3Colors.primary30 }}>
        <View>
          <Text variant='titleMedium'>Vous avez actuellement une pénalité jusqu'à {penaltyEndPretty}.</Text>
          <Text variant='titleSmall'>Temps restant : {prettyRemainingTime}</Text>
        </View>
      </Banner>
      <ProgressBar
          visible={hasPenalty}
          animatedValue={1 - remainingTime / (30 * 60)}
          color={MD3Colors.error40}
          style={{ height: 6 }} />
    </View>
  )
}