import React from 'react'
import styled from 'styled-components'
import IconWP from '@/public/assets/icons/icon-whatsapp.svg'
import IconFB from '@/public/assets/icons/icon-facebook.svg'
import IconInstagram from '@/public/assets/icons/icon-instagram.svg'
import IconLinkedIn from '@/public/assets/icons/icon-linkedIn.svg'
import IconGoogle from '@/public/assets/icons/icon-google.svg'
import IconTwiter from '@/public/assets/icons/icon-twitter.svg'
import IconYT from '@/public/assets/icons/icon-youtyube.svg'
import IconThreds from '@/public/assets/icons/icon-threds.svg'
import { Colors } from './variable'
import Link from 'next/link'
const SocialMediaRow = styled.ul`
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 80px;
    li {
        a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 2px solid ${Colors.body};
            border-radius: 100%;
            width: 90px;
            height: 90px;
            position: relative;
            svg {
                width: 48px;
                height: 48px;
                transition: all 0.4s;
            }
            span {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: all 0.4s;
                img {
                    width: 100% !important;
                    height: 100% !important;
                    object-fit: cover;
                }
            }
            &:hover {
                border-color: transparent;
                svg {
                    opacity: 0;
                    transition: all 0.4s;
                }
                span {
                    opacity: 1;
                    transition: all 0.4s;
                    svg {
                        opacity: 1;
                    }
                }
            }
        }
    }
`

const SocialMedia = ({ className }) => {
    const SocialMediaData = {
        List: [
            {
                Icon: <IconWP />,
                HoverIcon: `${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-whatsapp-hover.svg`,
                URL: 'https://wa.me/447360692006'
            },
            {
                Icon: <IconFB />,
                HoverIcon: `${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-facebook-hover.svg`,
                URL: 'https://www.facebook.com/frontline.health.professionals/'
            },
            {
                Icon: <IconInstagram />,
                HoverIcon: `${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-instagram-hover.svg`,
                URL: 'https://www.instagram.com/frontline.health.professionals/'
            },
            {
                Icon: <IconLinkedIn />,
                HoverIcon: `${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-linkedIn-hover.svg`,
                URL: 'https://www.linkedin.com/company/frontline-health-professionals/'
            },
            // {
            //     Icon:<IconGoogle/>,
            //     HoverIcon:`${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-google-hover.svg`,
            //      URL:''
            // },
            {
                Icon: <IconTwiter />,
                HoverIcon: `${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-twitter-hover.svg`,
                URL: 'https://twitter.com/FrontlineHP'
            },
            {
                Icon: <IconYT />,
                HoverIcon: `${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-youtyube-hover.svg`,
                URL: 'https://www.youtube.com/@frontline-health-professionals'
            }
            // {
            //     Icon:<IconThreds/>,
            //     HoverIcon:`${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-threds-hover.svg`,
            //      URL:'https://www.instagram.com/'
            // }
        ]
    }
    return (
        <>
            <SocialMediaRow className={className}>
                {SocialMediaData.List?.map((list, i) => {
                    return (
                        <li key={i}>
                            <Link href={list.URL} target="_blank">
                                {list.Icon}
                                <span>
                                    {' '}
                                    <img src={list.HoverIcon} alt="icon" />{' '}
                                </span>
                            </Link>
                        </li>
                    )
                })}
            </SocialMediaRow>
        </>
    )
}

export default SocialMedia