import React, {useContext,} from "react";
import AuthContext from "../../context/auth-context";
import {LinkWithQuery} from "../HOC/LinkWithQuery";
import useTranslations from "../../hooks/useTranslations";
import {Microservice} from "../../models/EgovUser";
import "./application-box.scss"
import {ApplicationsLogoTranslations} from "../../helpers/translations2";

interface ApplicationBoxProps {
    ms:string
}


const ApplicationBox =({ms}: ApplicationBoxProps) => {
    const {currentUser} = useContext(AuthContext);
    const uniqueMicroservices = (Object.keys(currentUser!.microservice_permissions));
    const {
        translateMicroserviceDesc,
    } = useTranslations();

    return (
    <LinkWithQuery
        key={ms}
        to={ms}>
        <div className={`application-box application`}>
            <div className={'application-box--inner'}>
                <span className={"application-box--logo"}>
                {/*@ts-ignore*/}
                    <img height="30" src={ApplicationsLogoTranslations[ms as Microservice]} alt={ms}/>
                </span>
                <span className={"application-box--desc"}>{/*@ts-ignore*/}
                    {translateMicroserviceDesc(ms)}
                </span>
            </div>
        </div>
    </LinkWithQuery>

    )}

export default ApplicationBox;