"use client";

import { FC, useEffect, useState } from "react";
import { redirect } from "next/navigation";
import { useSelector } from "react-redux";
import { Button, Text } from "@mantine/core";
import SERVICES from "@/constants/services";
import { ServiceCode } from "@/enums/ServiceCode";
import { RootState } from "@/lib/store";
import ServiceData from "@/types/ServiceData";

const ConfirmAccessButton: FC = () => {
    const serviceCode = useSelector(
        (state: RootState) => state.targetService.serviceCode
    );
    const [serviceData, setServiceData] = useState<ServiceData>();

    useEffect(() => {
        if (serviceCode === ServiceCode.UNDEFINED) {
            redirect("services");
        }
        setServiceData(SERVICES[serviceCode]);
    }, [serviceCode]);

    const confirmAccess = () => {};

    return (
        <>
            <Button
                onClick={() => confirmAccess()}
                variant={"filled"}>
                Войти
            </Button>
            <Text
                fz={"h4"}
                ta="center">
                Сервис {serviceData?.name} получит{" "}
                {serviceData?.requiredAccesses}
            </Text>
        </>
    );
};

export default ConfirmAccessButton;