import { View, Text } from "react-native";
import { Button } from "react-native-paper";
import { router } from "expo-router";
import { useAppSelector } from "@/store/hooks";
import { selectIsMobile } from "@/store/screen/screenSizeSlice";

export const AccessDenied = () => {
  const isMobile = useAppSelector(selectIsMobile);

  return (
    <View className="flex-1 bg-primaryPurpleLight">
      <View className={`${isMobile ? "p-1" : "p-5"} flex-1`}>
        <View className={`${isMobile ? "p-1" : "p-5"} bg-lightGray rounded-lg flex-1`}>
          <View className="flex-1 justify-center items-center p-4">
            <Text className="text-2xl font-bold mb-4 text-highRisk">
              Access Denied
            </Text>
            <Text className="text-base mb-6 text-center">
              You do not have permission to access this page. Please contact an
              administrator if you believe this is an error.
            </Text>
            <Button
              mode="contained"
              onPress={() => router.replace("/dashboard/user-dashboard")}
              className="bg-primary"
            >
              Return to Dashboard
            </Button>
          </View>
        </View>
      </View>
    </View>
  );
};