import MediaButton from "../../Components/Ui/MediaButton";
import SingleLink from "../../Components/Ui/SingleLink";
import { InfoLinks, DocumentLinks, FooterLinks, mediaArrayWithInfo } from "../../data/Links";
import { mediaArray } from "../../data/media";
import CopyRight from "./CopyRight";



const Footer = () => {
  const {t} = useTranslation();
    return (
        <div className='footer_container'>
            <div className="logo_container">
                <img src={'/Logo/Logo.png'} width={100} className="logo" />

            </div>
            <div className='Footer'>

                <div className='home_links_section'>
                    <h4 >{t("Home")}</h4>  
                    <div className="links_container">
                        {FooterLinks.map((link, index) => (
                            <SingleLink key={index} href={link.href} name={link.name} />
                        ))}
                    </div>
                </div>
                
                <div className='home_links_section'>
                    <h4 >{t("Blogs")}</h4>  
                    <div className="links_container">
                        {InfoLinks.map((link, index) => (
                            <SingleLink key={index} href={link.href} name={link.name} />
                        ))}
                    </div>
                </div>

                <div className='home_links_section'>
                    <h4 >{t("Document")}</h4>  
                    <div className="links_container">
                        {DocumentLinks.map((link, index) => (
                            <SingleLink key={index} href={link.href} name={link.name} />
                        ))}
                    </div>
                </div>

                <div className='contact_links_section'>
                    <h4 >{t("Contact")}</h4> 
                    <div className="links_container">
                        {mediaArrayWithInfo.map((link, index) => (
                           <div><link.icon/> <span>{link.value}</span></div>
                        ))}
                    </div>
                </div>


                <div className='media_main_section'>
                    <h4 >{t("Social")} Media</h4> 
                    <div className='media_container'>
                        {mediaArray?.map((media, index) => (
                            <MediaButton key={index} img={media?.icon} link={media?.link} />
                        ))}
                    </div>
                </div>

            </div>
            <CopyRight/>
        </div>
    );
};

export default Footer;
