import React, {ReactNode, useContext} from "react";
import "./dashboard-services.scss";
import ServiceBox from "../RoleBox/ServiceBox";
import {Microservice, Role, RolePermissions} from "../../../models/EgovUser";

type DashboardServicesProps = {
    children?: ReactNode;
    role: Role;
    permissions: RolePermissions;
};

const DashboardServices = ({role, permissions}: DashboardServicesProps) => {

    return (
        <div className="dashboard-services">
            <p className="dashboard-services--title">Υπηρεσίες D.U.A.</p>
            <div className="dashboard-services--body">
                <div className="row gy-4">
                    {permissions && Object.keys(permissions).map((permission) => {

                        const [ms, module] = permission.split(".");
                        const serviceKey = role + "." + ms + "." + module;
                        return (
                            <div key={serviceKey} className={'col-clg-4'}>
                                <ServiceBox
                                    role={role}
                                    microservice={ms as Microservice}
                                    module={module}
                                />
                            </div>
                        );
                    })}
                </div>
            </div>

        </div>
    );
};

export default DashboardServices;