import React from "react";
import { LangDict } from "../langDict";
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">
                <div className="footer-content-contacts-first-container">
                    <ContactContainer
                        title={LangDict.contactTitle}
                        href="https://graff.tech"
                        pairData={[
                            {
                                value1: {
                                    type: "text",
                                    value: LangDict.contactRus                                    
                                }, 
                                value2: {
                                    type: 'text',
                                    value: LangDict.contactUae
                                }
                            },
                            {
                                value1: {
                                    type: 'email',
                                    value: 'info@graff.tech'
                                }, 
                                value2: {
                                    type: 'email',
                                    value: 'waseem@graff.tech'
                                }
                            },
                            {
                                value1: {
                                    type: "phone",
                                    value: '+7 800 770 00 67'
                                }, 
                                value2: {
                                    type: "phone",
                                    value: '+971 50 983 8902'
                                }
                            }
                        ]}
                    />
                </div>
                <div className="footer-content-contacts-second-container">
                    <ContactContainer
                        title={LangDict.socials}
                        pairData={[
                            {
                                value1: {
                                    type: 'a',
                                    value: 'Facebook',
                                    href: 'https://www.facebook.com/GRAFFinteractive'
                                }, 
                                value2: {
                                    type: 'a',
                                    value: 'Instagram',
                                    href: 'https://www.instagram.com/graffinteractive/'
                                }
                            },
                            {
                                value1: {
                                    type: 'a',
                                    value: 'YouTube',
                                    href: 'https://www.youtube.com/channel/UCveYBNLVeGxgsDsfhrVxNoA'
                                },
                                value2: {
                                    type: "a",
                                    value: 'VK',
                                    href: 'https://vk.com/graffinteractive'
                                }
                            }
                        ]}
                    />
                    <ContactContainer
                        title={LangDict.address}
                        pairData={[
                            {
                                value1: {
                                    type: "text",
                                    value: LangDict.streetName
                                }                                
                            },
                            {
                                value1: {
                                    type: "text",
                                    value: LangDict.townName
                                }
                            }
                        ]}
                    />
                </div>                
            </div>            
        </div>
    </div>
})