"use client";
import { useEffect } from "react";
import { useLang } from "@/lib/lang";
import { useConfig } from "@/lib/config";
// import { useAccess } from "@/lib/access";
import { use } from "react";
import { useRouter } from 'next/navigation';
import { useData, useFormRefs, ButtonContainer, Button, Frame } from "@/Theme/Midone";
import { Info, Register } from '@/app/(lms-panel)/[lang]/panel/(system)/(Users)/users/view';
import { Loading } from "@/Theme/Midone/Utils";

export default function View({ params }) {
    const { Lang } = useLang();
    const { laraAdmin } = useConfig();
    const component = useFormRefs();
    const { get } = useData();
    const router = useRouter();
    // const { componentPermission } = useAccess();
    // componentPermission("registers.showInfo");

    const url = `${laraAdmin}/registers/show-info`;

    useEffect(() => {
        get(url, component, "info");
    }, []);

    const registers = component?.state?.info?.registers;
    const back = ()=>router.back();

    return (
        (registers == undefined)?
            <Frame title={Lang(["public.classes"])}>
                <div className="col-span-12 xxl:col-span-9">
                    <Loading className="mt-5" />
                </div>
            </Frame>
        :
            <>
                <Frame title={Lang(["public.classes"])}>
                    <div className="col-span-12 xxl:col-span-9">
                        <div className="grid grid-cols-12 gap-6">
                            <Register data={registers} filterDisplay={false} />
                        </div>
                    </div>
                </Frame>
                <ButtonContainer>
                    <Button label="back" onClick={back} />
                </ButtonContainer>
            </>
    );
}