import React from "react";
import { ratesConstants } from "./ratesConstants";

const { loadsAppImg, utmOrganic, loadsLoginUrl, gpLoadsUrl } = ratesConstants

const PartnerLoadContainer = (props:any) => {
    const {utmSource, translatedWords} = props
    const {
        getFullExperience = 'Get the full experience with our app',
        downloadApp = 'Download App',
        continueWithMobileWeb = 'Continue with mobile web',
    } = translatedWords || {}
    return (
        <div className="fr-my-2 fr-text-center">
            <picture>
                <img
                    src={loadsAppImg}
                    alt="playstore"
                    width={280}
                    height={280}
                    className="mx-auto"
                />
            </picture>
            <div>
                <div className="fr-bg-white fr-border fr-border-slate-100 fr-py-4 fr-shadow-md fr-rounded-lg -fr-mt-40 fr-relative fr-z-10">
                    <div>
                        <h6 className="fr-text-lg font-semibold font-sans mb-3">
                            {getFullExperience}
                        </h6>
                        <a
                            href={`${gpLoadsUrl}&` + utmSource||utmOrganic}
                            target={"_blank"}
                            className="fr-mt-2 fr-bg-secondary fr-rounded-md fr-p-2 fr-text-white fr-inline-block"
                            rel="noreferrer"
                        >
                            {downloadApp}
                        </a>
                    </div>
                </div>
                <a
                    href={`${loadsLoginUrl}/?` + utmSource||utmOrganic}
                    target={"_blank"}
                    className="fr-mt-4 fr-inline-block"
                    rel="noreferrer"
                >
                    {continueWithMobileWeb}
                </a>
            </div>
        </div>
    );
};

export default PartnerLoadContainer;