import React from 'react';
import './service-box.scss'
import {Link} from "react-router-dom";
import enter from '../../../assets/images/right-arrow-small.svg'
import {Microservice, Role} from "../../../models/EgovUser";
import useTranslations from "../../../hooks/useTranslations";
import certified from "../../../assets/images/shield-dua.svg";
import {encodeParams} from "../../../helpers/encodedParams";

type ServiceBoxProps = {

    role: Role
    microservice: Microservice
    module: string
    requiresExtraAuth?:boolean

}


const ServiceBox = ({

                        role,
                        microservice,
                        module,
                        requiresExtraAuth = false

                    }: ServiceBoxProps) => {
    const {

        translateMicroservice,
        translateModule
    } = useTranslations()


    return (
        <Link to={`/applications/${microservice}/services/${module}?t=${encodeParams({ activeRole: role })}`}>


            <div className={`service-box default ${requiresExtraAuth && 'requires-extra-auth'}`}>
                <div className={'service-box--role-module'}>

                    <span className={"service-box--module"}>
                        {translateModule(microservice.concat('.', module))}
                    </span>

                    {' '}

                    <span className={"service-box--micro"}>
                            ({translateMicroservice(microservice)})
                    </span>

                </div>


                {requiresExtraAuth && <img className={'certified'} src={certified} width={45}/>}

                <img className={'enter'} src={enter} alt=""/>

            </div>
        </Link>
    );
}

export default ServiceBox;