import React from 'react';
import { useTranslations } from 'next-intl';
import { Link } from '../../../navigation';
import { FOOTER_ROUTES } from '../../../constants/routes';

export const Footer = () => {
    const t = useTranslations('Footer');

    return (
        <footer className="b-footer">
            <div className="b-inner">
                <div className="row">
                    <div className="col">
                        <a href="/" className="b-footer__logo">
                            <img className="" src="/images/footer-logo.svg" alt=""/>
                        </a>
                    </div>
                    <div className="col-md-auto">
                        <div className="b-footer__row">
                            <div className="b-footer__coll">
                                <div className="b-footer__coll__item">
                                    <a href={`mailto:${t('email')}`} className="b-footer__link">
                                        <img className="" src="/images/mail-outline.svg" alt=""/>
                                        {t('email')}
                                    </a>
                                    <a href="#" className="b-footer__link">
                                        <img className="" src="/images/call-outline.svg" alt=""/>
                                        {t('phone')}
                                    </a>
                                </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">
                                    {FOOTER_ROUTES.map((item) => (
                                        <Link key={item} href={`/${item}` as any} className="b-footer__link">{t(`menu.${item}`)}</Link>
                                    ))}
                                </div>
                                <div className="b-footer__social">
                                    <a href="#" className="b-footer__link">
                                        <img className="" src="/images/logo-facebook.svg" alt=""/>
                                    </a>
                                    <a href="#" className="b-footer__link">
                                        <img className="" src="/images/logo-instagram.svg" alt=""/>
                                    </a>
                                    <a href="#" className="b-footer__link">
                                        <img className="" src="/images/logo-linkedin.svg" alt=""/>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    );
}