import React from "react";
import { ContactContainer } from "./contactsContainer";
import './footer.css';
import whiteLogo from './logoWhiteIcon.svg';

export const Footer:React.FC = React.memo(() => {
    return <div className="footer-container">
        <div className="footer-content-container">
            <img className="footer-content-logo" alt="logo" src={whiteLogo}></img>
            <div className="footer-content-contacts">
                <ContactContainer
                    title="Контакты"
                    href="graff.tech"
                    pairData={[
                        {value1: 'Россия', value2: 'ОАЭ'},
                        {value1: 'info@graff.tech', value2: 'waseem@graff.tech'},
                        {value1: '+7 800 770 00 67', value2: '+971 50 983 8902'}
                    ]}
                />
                <ContactContainer
                    title="Соцсети"
                    pairData={[
                        {value1: 'Facebook', value2: 'Instagram'},
                        {value1: 'YouTube', value2: 'VK'}
                    ]}
                />
                <ContactContainer
                    title="Адрес"
                    pairData={[
                        {value1: 'ул. Московская, 47,'},
                        {value1: 'Екатеринбург, Россия'}
                    ]}
                />
            </div>            
        </div>
    </div>
})