import { useTranslations } from "@/providers/TranslationProviders";
import { useRouter } from "expo-router";
import { Text, View } from "react-native";
import {
  HouseIcon,
  SignInIcon,
  UserCircleMinusIcon,
} from "phosphor-react-native";
import Button from "../ui/Button";

export default function RegistrationDisabled() {
  const { tran } = useTranslations();
  const router = useRouter();
  return (
    <View className="w-full flex flex-col items-center text-center py-8">
      {/* Icon Container */}
      <View className="relative mb-6">
        <View className="absolute inset-0 bg-linear-to-br from-amber-500/20 via-amber-500/10 to-transparent rounded-full blur-2xl animate-pulse"></View>
        <View className="relative w-24 h-24 rounded-full items-center justify-center border border-amber-500/20 bg-amber-500/10 ">
          <UserCircleMinusIcon size={40} color="#f59e0b" />
        </View>
      </View>

      {/* Title */}
      <Text className="text-3xl font-manrope-bold mb-3">
        {tran("Registration Disabled")}
      </Text>

      {/* Description */}
      <Text className="text-body-text text-base max-w-md mb-8 text-center text-slate-500">
        {tran(
          "New user registration is currently disabled. Please check back later or contact support for assistance.",
        )}
      </Text>

      {/* Action Buttons */}
      <View className=" justify-center flex-row items-center gap-4">
        <Button
          onPress={() => router.push("/")}
          text="Go Home"
          type="secondary"
          leftIcon={<HouseIcon size={18} color="white" />}
          className="w-[140px]"
        />
        <Button
          onPress={() => router.push("/(auth)/sign-in")}
          text="Sign In"
          type="primary"
          leftIcon={<SignInIcon size={18} color="white" />}
            className="w-[140px]"
        />
      </View>

      {/* Decorative elements */}
      <View className="flex-row gap-2 opacity-30 mt-8">
        <View className="w-2 h-2 rounded-full bg-amber-500"></View>
        <View className="w-2 h-2 rounded-full bg-amber-500"></View>
        <View className="w-2 h-2 rounded-full bg-amber-500"></View>
      </View>
    </View>
  );
}
