import type { NextPage } from "next";
import Lottie from "react-lottie";
import Image from "next/image";
import { MutableRefObject, useRef, useState } from "react";





const Footer: NextPage = () => {

    const playAnimation = (ref: any) => {
        if (ref?.current) {
            ref.current.play()
        }
    }

    const [isPause, setIsPause] = useState(true)
    const [isStopped, setIsStopped] = useState(true)


    const contactLinks = [
        {
            href: "https://github.com/amirmoghi3",
            label: "Github",
            icon: require("assets/json/github.json"),
            path: "assets/json/github.json",
            ref: useRef(null)
        },
        {
            href: "https://www.linkedin.com/in/amirmoghi3/",
            label: "LinkedIn",
            icon: require("assets/json/linkedin.json"),
            path: "assets/json/linkedin.json",
            ref: useRef(null)
        },
        {
            href: "https://www.instagram.com/amirmoghi3/",
            label: "Instagram",
            icon: require("assets/json/instagram.json"),
            path: "assets/json/instagram.json",
            ref: useRef(null)
        },
        {
            href: "https://twitter.com/amirmoghi3",
            label: "Twitter",
            icon: require("assets/json/twitter.json"),
            path: "assets/json/twitter.json",
            ref: useRef(null)
        },
        {
            // email
            href: "mailto:siramirmoghi3@gmail.com",
            label: "Email",
            icon: require("assets/images/email.png"),

        },
        {
            //discord
            href: "https://discord.gg/FeECbW766J",
            label: "Discord",
            icon: require("assets/json/discord.json"),
            path: "assets/json/discord.json",
            ref: useRef(null)

        }

    ]

    return (
        <div className="fixed bottom-5  md:px-5 py-3  w-full">
            <div className="flex flex-col md:flex-row-reverse justify-between w-full">
                <div className="flex flex-row">
                    {
                        contactLinks.map(contactLink => (
                            <a onMouseEnter={() => playAnimation(contactLink.ref)} href={contactLink.href} target="_blank" key={contactLink.href} className="px-2 cursor-pointer" rel="noreferrer" >
                                {
                                    contactLink.path ?
                                        <div className="bg-secondary w-7 h-7 hover:bg-gold">
                                            <div className="relative -top-2 -right-2">
                                                <Lottie options={{
                                                    animationData: contactLink.icon,
                                                    loop: false,
                                                    autoplay: true,

                                                }}
                                                    height={20}
                                                    width={20}
                                                    title={contactLink.label}
                                                />
                                            </div>
                                        </div>
                                        : (
                                            <div className="bg-secondary w-7 h-7 hover:bg-gold">
                                                <div className="relative -top-2 -right-3">
                                                    <Image src={contactLink.icon} width={20} height={20} alt={contactLink.label} />
                                                </div>
                                            </div>
                                        )
                                }
                            </a>
                        ))
                    }
                    <div className="px-2 cursor-pointer w-[20px] h-[20px]">

                    </div>
                </div>
                <div className="container">
                    <p className="text-secondary text-xs opacity-30 pl-1 md:pl-0 break-all">
                        @2020 Lord (Arbab) Amir Hossein Moghiseh - Bondman (raiiat) masoomi pour @hossein_masoomi - All Rights Reserved - Version {process.env.NEXT_PUBLIC_VERSION}
                    </p>
                </div>
            </div>

        </div>
    )

}

export default Footer;