import React from "react";
import {LinkWithRole} from "../HOC/LinkWithRole";
import useTranslations from "../../hooks/useTranslations";
import "./application-box.scss";
import defaultAppLogo from "../../assets/images/logo-rectangle-egov.svg";


interface ApplicationBoxProps {
    ms:string
}


const ApplicationBox =({ms}: ApplicationBoxProps) => {


    const {
        translateMicroserviceDesc,
        translateMicroserviceIcon,
        translateMicroservice,
    } = useTranslations();

    // @ts-ignore
    // const imgExist = translateMicroserviceIcon(ms) && translateMicroserviceIcon(ms).includes('/logos')
    const appLogo = translateMicroserviceIcon(ms)
    // @ts-ignore
    const msViewName= translateMicroservice(ms)
    return (

    <LinkWithRole
        key={ms}
        to={ms}>
        <div className={`application-box application`}>
            <div className={'application-box--inner'}>
                <span className={"application-box--logo"}>
                {/*@ts-ignore*/}
                    {appLogo ? <img src={appLogo} alt={ms}/> : <><img width={'17px'} src={defaultAppLogo} alt={'default app logo'}/> <span> {msViewName}</span></>}
                </span>
                <span className={"application-box--desc"}>
                    {/*@ts-ignore*/}
                    {translateMicroserviceDesc(ms)}
                </span>
            </div>
        </div>
    </LinkWithRole>

    )}

export default ApplicationBox;