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  IconYT from '@/public/assets/icons/icon-youtube.svg'
import  IconThreds from '@/public/assets/icons/icon-threds.svg'
import  IconTwitter from '@/public/assets/icons/icon-twitter.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',
                title:'Whatsapp',
            },
            {
                Icon:<IconFB/>,
                HoverIcon:`${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-facebook-hover.svg`,
                URL:'https://www.facebook.com/frontline.health.professionals/',
                title:'Facebook',
            },
            {
                Icon:<IconInstagram/>,
                HoverIcon:`${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-instagram-hover.svg`,
                URL:'https://www.instagram.com/frontline.health.professionals/',
                title:'Instagram',
            },
            {
                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/',
                title:'Linkedin',
            },
            // {
            //     Icon:<IconGoogle/>,
            //     HoverIcon:`${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-google-hover.svg`,
            //     URL:''
            // },
            {
                Icon:<IconTwitter/>,
                HoverIcon:`${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-twitter-hover.svg`,
                URL:'https://twitter.com/FrontlineHP',
                title:'Twitter',
            },
            {
                Icon:<IconYT/>,
                HoverIcon:`${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-youtube-hover.svg`,
                URL:'https://www.youtube.com/@frontline-health-professionals',
                title:'Youtube',
            },
            // {
            //     Icon:<IconThreds/>,
            //     HoverIcon:`${process.env.NEXT_PUBLIC_LOCAL_IMAGE_PATH}assets/icons/icon-threds-hover.svg`,
            //     URL:'https://www.instagram.com/',
            //     title:'Threds',
            // }
        ]
    }
  return (
    <>
      <SocialMediaRow className={className}>
        {SocialMediaData.List?.map((list,i)=>{
            return(
                <li key={i} >
                    <Link href={list.URL} target='_blank' title={list.title}>
                        {list.Icon}
                        <span><img src={list.HoverIcon} alt="icon" /> </span>
                    </Link>
                </li>
            )
        })}
        
      </SocialMediaRow>
    </>
  )
}

export default SocialMedia