import React from 'react'
import Logo from './core/Logo'
import facebook from '../images/facebook.svg';
import google from '../images/google.svg';
import linkedin from '../images/linkedin.svg';
import twitter from '../images/twitter.svg';
import instagram from '../images/instagram.svg';

interface ISocialMediaList {
    logo?: any,
    name?: string,
    url?: string,
    className?: string
    layout?:string
}

const SocialMediaList = (props:ISocialMediaList) => {
    const classRow = "flex  gap-x-1"
    const classCol = "flex flex-col gap-y-1"
    const {logo, name, url, className="", layout = "row"} = props;

    const list = [
        {
            logo: facebook,
            name: "facebook"
        },
        {
            logo: instagram,
            name: "instagram"
        },
        {
            logo: linkedin,
            name: "linkedin"
        },
        {
            logo: twitter,
            name: "twitter"
        },
        {
            logo: google,
            name: "google"
        },
    ]
    return (
        <div className='flex flex-col'>
            <div>
                <h3 className='font-bold pb-3'>Réseaux sociaux</h3>    
            </div>    
            <div className={`${layout == "row" ? classRow : classCol}`}>
                {
                    list.map((item:any, key:number) => {
                        return (
                            <div className={`pb-0`} key={key}>
                                <div className={`tooltip ${layout == "row" ? 'tooltip-bottom' : 'tooltip-right'} `} data-tip={item.name}>
                                    <Logo image={item.logo} className={"w-10 h-10"} classImg={"my-2 h-10 w-10"}/>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default SocialMediaList