import React from 'react';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { Link as IntlLink } from '../../../i18n/routing';
import { i18nText } from '../../../i18nKeys';

export const Footer = ({ locale }: { locale: string }) => {
    const t = useTranslations('Footer');

    return (
        <footer className="b-footer">
            <div className="b-inner">
                <div className="row">
                    <div className="col">
                        <IntlLink href={'/' as any} className="b-footer__logo">
                            <img className="" src="/images/footer-logo.svg" alt=""/>
                        </IntlLink>
                    </div>
                    <div className="col-md-auto">
                        <div className="b-footer__row">
                            <div className="b-footer__coll">
                                <div className="b-footer__coll__item">
                                    <Link href={`mailto:${t('email')}`} className="b-footer__link">
                                        <img className="" src="/images/mail-outline.svg" alt=""/>
                                        {t('email')}
                                    </Link>
                                    <Link href="#" className="b-footer__link">
                                        <img className="" src="/images/call-outline.svg" alt=""/>
                                        {t('phone')}
                                    </Link>
                                </div>
                                <span className="b-footer__text">
                                <img className="" src="/images/location-outline.svg" alt=""/>
                                {t('address')}
                            </span>
                            </div>
                            <div className="b-footer__coll-2">
                                <div className="b-footer__coll-2__item">
                                    <IntlLink href={'/faq' as any} className="b-footer__link">
                                        {i18nText('footer.faq', locale)}
                                    </IntlLink>
                                    <Link href={'/docs/BBUDDY_privacy_policy_fin.docx' as any} className="b-footer__link">
                                        {i18nText('footer.policy', locale)}
                                    </Link>
                                </div>
                                <div className="b-footer__social">
                                    <Link href="#" className="b-footer__link">
                                        <img className="" src="/images/logo-facebook.svg" alt=""/>
                                    </Link>
                                    <Link href="#" className="b-footer__link">
                                        <img className="" src="/images/logo-instagram.svg" alt=""/>
                                    </Link>
                                    <Link href="#" className="b-footer__link">
                                        <img className="" src="/images/logo-linkedin.svg" alt=""/>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
}