import { useState, useEffect } from "react";
import { Pressable, Text } from "react-native";

export function BadgeTimer({
  duration,
  text,
}: {
  duration: number;
  text: string;
}) {
  const [showBadge, setShowBadge] = useState(true);

  function hideBadge() {
    setShowBadge(false);
  }

  useEffect(() => {
    const timer = setTimeout(() => {
      hideBadge();
    }, duration);

    return () => clearTimeout(timer);
  }, [duration]);

  if (!showBadge) return null;

  return (
    <Pressable
      onPress={hideBadge}
      className="border-transparent px-4 py-2 bg-secondary/80 rounded-full "
    >
      <Text className="text-secondary-foreground font-semibold">
        {text}
      </Text>
    </Pressable>
  );
}