import { MetaSocial } from '@/generated/types'
import Image from 'next/image'
import Link from 'next/link'

type MetaProps = {
  data: MetaSocial[]
}

type RootLayoutProps = {
  params: MetaProps
}

export function Meta({ params: { data } }: RootLayoutProps) {
  
  return (
    <>
      {data?.length > 0 &&
        data?.map((res: MetaSocial, index: number) => {
          const isLastIndex = index === data.length - 1
          return (
            <div key={index}>
              <Link href={res.link} passHref>
                <Image
                  src={res.image?.url}
                  alt={
                    res.image?.alt && 
                    res.image?.alt.length > 0 ? res.image?.alt : 'metaSocial' + index
                  }
                  className={`hover:cursor-pointer ${
                    isLastIndex ? '' : 'mb-1'
                  } h-4 w-4`}
                  width={15}
                  height={20}
                />
              </Link>
            </div>
          )
        })}
    </>
  )
}

export default Meta