import photo1 from '@public/images/photo1.svg'
import photo2 from '@public/images/photo2.svg'
import photo3 from '@public/images/photo3.svg'
import { useTranslation } from 'next-i18next'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { SlideReview } from '../Slide'

export function SectionLeagues() {
  const { t } = useTranslation()
  const router = useRouter()
  const [datosLigas, setDatosLigas] = useState<League[]>([])
  type League = {
    id: number
    title: string
    fecha: string
    image: string
  }

  const datosX: League[] = [
    { id: 1, title: 'Liga funalito', fecha: 'Del 25 de marzo al 31 de agosto', image: photo1 },
    { id: 2, title: 'Liga funalito', fecha: 'Del 25 de marzo al 31 de agosto', image: photo2 },
    { id: 3, title: 'Liga fulanita', fecha: 'Del 25 de marzo al 31 de agosto', image: photo3 },
    { id: 4, title: 'Liga funalit@', fecha: 'Del 25 de marzo al 31 de agosto', image: photo1 },
    { id: 5, title: 'Liga funalite', fecha: 'Del 25 de marzo al 31 de agosto', image: photo2 },
    { id: 6, title: 'Liga funalitus', fecha: 'Del 25 de marzo al 31 de agosto', image: photo3 }
  ]
  useEffect(() => {
    setDatosLigas(datosX)
  }, [])
  return (
    <div className="w-full ">
      <SlideReview dataReview={datosLigas} sizeCard={360} sizeGapCard={76} sizeGapCardMobile={24} />
    </div>
  )
}
