import Image from 'next/image'
import Link from 'next/link'
import { NextComponentType } from 'next'
import { useState } from 'react'
import styles from './partners.module.css'




// Components
import HeroText from '../HeroText/HeroText'
import MidTitle from '../MidTitle/midTitle'

// [key:string]: any - this adds tolerance when the prop received has more than we asked for.

type Props = {
  [key:string]:any;
  menu: any,
  content:any

}


export const Partners:NextComponentType = (props:Props) => {
  const [content, setContent] = useState(props)
  const urlBase = process.env.NEXT_PUBLIC_BASE_URL

  return (
      <section className={styles.partners} >
          <MidTitle text={content.mid_heading}/>
          <HeroText title={content.title} maindesc={content.main_description} />
          <ul className={styles.partners_list} >
            {content.parceiro.map((item, index)=>{
              return(
                <li key={index} >
                  <Link key={index+item.id} href={item.website} >
                      <Image src={`${urlBase}${item.logo.data.attributes.formats.thumbnail.url}`}  width="300" height="300" alt="" />
                      <span>{item.nome}</span>
                  </Link>
                </li>

              )
            })}
          </ul>
      </section>
  )
}

export default Partners
