import localFont from "next/font/local";
import logo from '../../../public/logo.png';
import Image from "next/image";

const figtree = localFont({
    src: [
        {
            path: '../../../public/Fonts/figtree/figtree.ttf',
        },
    ],
})

const InstagramLogo = <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"></path></svg>

function Footer() {
    return (
        <div>
            <div className="flex flex-row items-center justify-around border border-black border-4">
                <Image src={logo} alt="logo" width={200} height={200} />
                <div className="hover:scale-105 transition-all duration-300 cursor-pointer">{InstagramLogo}</div>
                <div className="flex flex-row items-center justify-evenly gap-4">
                    <button className={`${figtree.className} text-xs font-light hover:underline cursor-pointer`}>Contact</button>
                    <button className={`${figtree.className} text-xs font-light hover:underline cursor-pointer`}>T&Cs</button>
                    <button className={`${figtree.className} text-xs font-light hover:underline cursor-pointer`}>Legal</button>
                    <button className={`${figtree.className} text-xs font-light hover:underline cursor-pointer`}>Privacy</button>
                </div>
            </div>
        </div>
    )
}

export default Footer;