import React, {ReactNode} from 'react';
import './service-box.scss'
import {Link} from "react-router-dom";
import enter from '../../../assets/images/right-arrow-small.svg'
import {LinkWithQuery} from "../../HOC/LinkWithQuery";
import {Role, Microservice} from "../../../models/EgovUser";
import useTranslations from "../../../hooks/useTranslations";
import applications from "../../Applications/Applications";

type ServiceBoxProps = {
    withRole?: boolean
    role: Role
    microservice: Microservice
    module: string
    icon?: JSX.Element
    theme?: "default" | "application"
}


const ServiceBox = ({
                        withRole = false,
                        role,
                        microservice,
                        module,
                        icon,
                        theme = 'default'
                    }: ServiceBoxProps) => {

    const {
        translateRole,
        translateMicroservice,
        translateModule
    } = useTranslations()


    // @ts-ignore
    return (
        <Link to={`/applications/${microservice}/services/${module}?activeRole=${role}`}>


            <div className={`service-box ${theme}`}>
                {
                    icon &&
                    <div className={"service-box--icon"}> {icon} </div>
                }
                {' '}
                <div className={'service-box--role-module'}>
                {
                    withRole &&
                        <span className={'role'}>
                            {translateRole(role)}
                        </span>
                }
                    {' '}
                <span className={"service-box--module"}>
                    {translateModule(microservice.concat('.', module))}
                </span>  {' '}
                {
                    theme !== "application" &&
                    <span className={"service-box--micro"}>
                        ({translateMicroservice(microservice)})
                    </span>
                }
                </div>
                {' '}
                {
                    theme !== "application" &&
                    <img className={'enter'} src={enter} alt=""/>
                }
            </div>
        </Link>
    );
}

export default ServiceBox;