import React from "react";
import { View, Text, ScrollView } from "react-native";
import { Button } from "~/components/ui/button";
import { SafeAreaView } from "react-native-safe-area-context";
import { router, useLocalSearchParams } from "expo-router";
import { ROUTES } from "~/lib/routes";
import { SuccessIcon } from "~/components/ui/icons";
import { useTranslation } from "react-i18next";

export default function MoneyDonated() {
  const params = useLocalSearchParams<{ fullName?: string }>();
  const { t } = useTranslation();

  const handleDonateAgain = () => {
    router.replace(ROUTES.HOME);
    router.push(ROUTES.SEND_OR_REQUEST_MONEY);
  };

  const fullName = (params.fullName || "").toString().trim();

  return (
    <SafeAreaView className="flex justify-center items-center h-full w-full space-y-5">
      <ScrollView>
        <View className="flex py-[50%] justify-center w-full h-full">
          <View className="flex items-center space-y-10">
            <SuccessIcon />
            <View className="h-10" />
            <Text className="text-primary text-3xl">
              {t("moneydonated.title")}
            </Text>
            <View className="h-4" />
            <View className="mx-12">
              <Text className="text-2xl font-regular text-gray-400 font-dmsans text-center">
                {t("moneydonated.description")}
              </Text>
            </View>
          </View>

          <View className="h-32" />

          <View className="w-full px-5">
            <Button
              className="bg-white border border-dashed border-secondary rounded-full"
              onPress={() => router.replace(ROUTES.HOME)}
            >
              <Text className="font-dmsans text-black">
                {t("moneydonated.goHomeButton")}
              </Text>
            </Button>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}