import React, {ReactNode, useContext} from 'react';
import {Microservice} from "../../../models/EgovUser";
import useTranslations from "../../../hooks/useTranslations";
import {Link} from "react-router-dom";
import right from '../../../assets/images/right-arrow-blue.svg'
import certified from "../../../assets/images/certified.svg";
import AuthContext from "../../../context/auth-context";
// import certified from "../../../assets/images/shield-dua.svg";


import {encodeParams} from "../../../helpers/encodedParams";

type DuaServiceBoxProps = {
    module: string,
    microservice: Microservice,
    requiresExtraAuth?: boolean
}

const DuaServiceBox = ({module, microservice, requiresExtraAuth = false}: DuaServiceBoxProps) => {
    const {currentUser} = useContext(AuthContext);
    const {
        translateMicroservice,
        translateModule
    } = useTranslations()

    return (
        <Link
            to={`/applications/${microservice}/services/${module}${
                microservice === "difo" && module === "personal_folder" 
                    ? `/${currentUser!.id.toString()}/overview`
                    : ""
            }?t=${encodeParams({ activeRole: 'dua_user' })}`}
        >
            <div className={`dua-service-box ${requiresExtraAuth && 'requires-extra-auth'}`}>
                <p>
                    {translateModule(microservice.concat('.', module))} ({translateMicroservice(microservice)})
                </p>
                <img className={'enter'} src={right} width={12} height={10}/>
                {requiresExtraAuth && <img className={'certified'} src={certified} width={70}/>}
            </div>
        </Link>
    );
}

export default DuaServiceBox;