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 {
    layout?:string,
    dataList: any
}

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

    return (
        <div className='flex flex-col'>
            <div>
                <h3 className='font-bold pb-3'>Réseaux sociaux</h3>    
            </div>    
            <div className={`${layout == "row" ? classRow : classCol}`}>
                {
                    dataList.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={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`}  to={item.url} className={"w-10 h-10"} classImg={"my-2 h-10 w-10"}/>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default SocialMediaList