'use client'
import { Blogs } from '@/generated/types'
import { useEffect, useState } from 'react'
import { useTranslation } from '../../app/i18n'

import Link from 'next/link'
import styles from './blog.module.scss'

type BlogProps = {
  lng: string
  // isLoad: bo
  blogs: Blogs[]
}

type RootLayoutProps = {
  params: BlogProps
}

type TranslationFunction = (key: string) => string

export default function Blogs({ params: { lng, blogs } }: RootLayoutProps) {
  const [t, setT] = useState<TranslationFunction | null>(null)
  const [i18n, setI18n] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const { t, i18n } = await useTranslation(lng, 'second-page')
      setT(() => t)
      setI18n(i18n)
    }

    fetchData()
  }, [lng])

  if (!t || !i18n) {
    return null
  }

  return (
    <section className="my-14 w-full box-border">
      <div className="grid mt-2">
        <div className="ml-8 mb-3">
          <div className="mx-5 w-4 h-1 font-arial bg-gray-950 dark:bg-white"></div>
          <div className="flex sm:grid mx-4 pr-1">
            <h1
              className={`${styles.title_blogs} font-bold text-2xl text-gray-900 mb-1 dark:text-white`}
            >
              {t('news.title_one')}
            </h1>
            <h1 className={styles.blogs_title}>{t('news.title_two')}</h1>
          </div>
        </div>
        <div className={`${styles.page_blog} flex md:hidden `}>
          <div className="w-full ml-3 pl-2 pr-5 lg:px-2 mb-2">
            {blogs &&
              blogs?.length > 0 &&
              blogs.map((blog: Blogs, index: number) => {
                return (
                  <div
                    key={'first' + index}
                    className="mx-1.5 h-36 my-2 bg-center rounded-md"
                    style={{
                      backgroundImage: `linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.858)), url(${blog.image?.url})`,
                      backgroundSize: '100% 100%',
                    }}
                  >
                    <div className="pt-4 grid ml-5">
                      <div className="ml-0.5 w-5 h-1 font-arial bg-white"></div>
                      <div className={`${styles.tags} text-white mt-1.5 mb-1`}>
                        {blog.tags?.toUpperCase()}
                      </div>
                      <div
                        className={` ${styles.title} text-md font-bold text-white mt-1`}
                      >
                        {blog.title?.toUpperCase()}
                      </div>
                      <div className=" w-48 mt-4 ml-1.5 inline-block">
                        <Link href={`${blog.slugUrl}`}>
                          <p
                            className={` ${styles.button} px-4 w-auto text-center text-white hover:bg-gray-400 font-semibold py-1.5 border-2 border-blue-400 rounded-full`}
                          >
                            {t('blogs')}
                          </p>
                        </Link>
                      </div>
                    </div>
                  </div>
                )
              })}
          </div>
        </div>
        <div
          className={`${styles.page_blog} hidden md:grid mx-8 px-3 lg:flex lg:justify-between `}
        >
          <div className="grid w-full lg:w-1/2 mb-2">
            <div className="bg-transparent px-5 ml-1 lg:px-0.5 h-max mb-2">
              {blogs &&
                blogs?.length > 0 &&
                blogs.slice(0, 1).map((blog: Blogs, index: number) => {
                  return (
                    <div
                      key={'first' + index}
                      className="w-full h-72 bg-center rounded-md"
                      style={{
                        backgroundImage: `linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.858)), url(${blog.image?.url})`,
                        backgroundSize: '100% 100%',
                      }}
                    >
                      <div className="pt-5 md:pt-8 grid ml-5">
                        <div className="ml-0.5 w-5 h-1 font-arial bg-white"></div>
                        <div
                          className={`${styles.tags} text-white mt-1.5 mb-2`}
                        >
                          {blog.tags?.toUpperCase()}
                        </div>
                        <div
                          className={`${styles.title} text-2xl font-bold text-white mt-2`}
                        >
                          {blog.title?.toUpperCase()}
                        </div>
                        <div className="mt-28 pt-3 w-48 ml-1.5 md:ml-3 inline-block">
                          <Link href={`${blog.slugUrl}`}>
                            <p
                              className={` ${styles.button} px-4 w-auto text-center text-white hover:bg-gray-400 font-semibold py-1.5 border-2 border-blue-400 rounded-full`}
                            >
                              {t('blogs')}
                            </p>
                          </Link>
                        </div>
                      </div>
                    </div>
                  )
                })}
            </div>
            <div className="flex flex-row w-full px-5 lg:px-0.5 mb-2 md:mb-0 justify-between">
              {blogs &&
                blogs.length > 0 &&
                blogs?.slice(1, 3).map((blog: Blogs, index: number) => {
                  return (
                    <div
                      key={'second' + index}
                      className={`${styles.height_blogs} w-1/2 mx-1 bg-center rounded-lg`}
                      style={{
                        backgroundImage: `linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.858)), url(${blog.image?.url})`,
                        backgroundSize: '100% 100%',
                      }}
                    >
                      <div className="pt-5 md:pt-8 grid ml-5">
                        <div className="ml-0.5 w-5 h-1 font-arial bg-white"></div>
                        <div
                          className={`${styles.tags} text-white mt-1.5 mb-2`}
                        >
                          {blog.tags?.toUpperCase()}
                        </div>
                        <div
                          className={`${styles.title} text-2xl font-bold text-white mt-`}
                        >
                          {blog.title?.toUpperCase()}
                        </div>
                        <div className="w-48 mt-72 pt-3 ml-1.5 md:ml-3 inline-block">
                          <Link href={`${blog.slugUrl}`}>
                            <p
                              className={` ${styles.button} px-4 w-auto text-center text-white hover:bg-gray-400 font-semibold py-1.5 border-2 border-blue-400 rounded-full`}
                            >
                              {t('blogs')}
                            </p>
                          </Link>
                        </div>
                      </div>
                    </div>
                  )
                })}
            </div>
          </div>
          <div className="grid w-full lg:w-1/2">
            <div className="flex flex-row w-full justify-between lg:px-0.5 mb-2">
              {blogs &&
                blogs?.length > 0 &&
                blogs?.slice(4, 6).map((blog: Blogs, index: number) => {
                  return (
                    <div
                      key={'third' + index}
                      className={`${styles.height_blogs} w-1/2 mx-1 bg-center rounded-lg`}
                      style={{
                        backgroundImage: `linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.858)), url(${blog.image?.url})`,
                        backgroundSize: '100% 100%',
                      }}
                    >
                      <div className="pt-5 md:pt-8 grid ml-5">
                        <div className="ml-0.5 w-5 h-1 font-arial bg-white"></div>
                        <div
                          className={`${styles.tags} text-white mt-1.5 mb-2`}
                        >
                          {blog.tags?.toUpperCase()}
                        </div>
                        <div
                          className={`${styles.title} text-2xl font-bold text-white mt-2`}
                        >
                          {blog.title?.toUpperCase()}
                        </div>
                        <div className="w-48 mt-72 pt-3 ml-1.5 md:ml-3 inline-block">
                          <Link href={`${blog.slugUrl}`}>
                            <p
                              className={`${styles.button} px-4 w-auto text-center text-white hover:bg-gray-400 font-semibold py-1.5 border-2 border-blue-400 rounded-full`}
                            >
                              {t('blogs')}
                            </p>
                          </Link>
                        </div>
                      </div>
                    </div>
                  )
                })}
            </div>
            <div className="bg-transparent w-full px-5 lg:px-0.5 h-max">
              {blogs &&
                blogs?.length > 0 &&
                blogs.slice(3, 4).map((blog: Blogs, index: number) => {
                  return (
                    <div
                      key={'fourth' + index}
                      className="w-full h-72 bg-center rounded-lg"
                      style={{
                        backgroundImage: `linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.858)), url(${blog.image?.url})`,
                        backgroundSize: '100% 100%',
                      }}
                    >
                      <div className="pt-5 md:pt-8 grid ml-5">
                        <div className="ml-0.5 w-5 h-1 font-arial bg-white"></div>
                        <div
                          className={`${styles.tags} text-white mt-1.5 mb-2`}
                        >
                          {blog.tags?.toUpperCase()}
                        </div>
                        <div
                          className={`${styles.title} text-2xl font-bold text-white mt-1`}
                        >
                          {blog.title?.toUpperCase()}
                        </div>
                        <div className="w-48 inline-block mt-28 pt-2 ml-1.5 md:ml-3">
                          <Link href={`${blog.slugUrl}`}>
                            <p
                              className={` ${styles.button} px-4 w-auto text-center text-white hover:bg-gray-400 font-semibold py-1.5 border-2 border-blue-400 rounded-full`}
                            >
                              {t('blogs')}
                            </p>
                          </Link>
                        </div>
                      </div>
                    </div>
                  )
                })}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}