import BasicLayout from '@/core/components/layouts/BasicLayout'
import { Card, Spinner } from 'flowbite-react'
import Link from 'next/link'
import { useCallback, useEffect, useState } from 'react'
import { createSlug } from '@/core/utils/slug'
import useDevice from '@/core/hooks/useDevice'
import Image from 'next/image'
import odooApi from '@/core/api/odooApi'

export default function Blogs() {
  const [isLoading, setIsLoading] = useState(true)
  const [blogsValues, setBlogs] = useState([])
  const { isMobile } = useDevice()

  const getBlogs = useCallback(async () => {
    // setIsLoading(true)
    const result = await odooApi('GET', '/api/v1/blog')
    setBlogs(result.blogs)
    setIsLoading(false)
  }, [])

  useEffect(() => {
    getBlogs()
  }, [getBlogs])

  if (isLoading) {
    return (
      <>
        <BasicLayout>
          <div className='container mx-auto flex justify-center my-4'>
            <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12 md:w-20 md:mt-28' />
          </div>
        </BasicLayout>
      </>
    )
  }
  return (
    <BasicLayout>
      <div className='container mx-auto p-4 md:p-0 mt-0 md:mt-10 mb-3'>
        <div>
          <h1 className='font-bold text-2xl'>Blog Indoteknik</h1>
        </div>
        <div className='grid grid-cols-2 gap-4 mt-4 md:grid-cols-4 !overflow-x-hidden'>
          {blogsValues?.map((blog, index) => {
            return (
              <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white' key={index}>
                <Image
                  src={blog.thumbnail}
                  alt={blog.title}
                  width={512}
                  height={512}
                  className='w-full h-[112px] object-cover object-center'
                />
                <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5 flex flex-col'>
                  <Link href='#' className='mb-1 font-normal text-red_r-11'>
                    {blog.category.name}
                  </Link>
                  <Link
                    href='#'
                    className='mb-2 !text-gray_r-12 text-body-1 font-semibold leading-6 line-clamp-2'
                  >
                    {blog.title}
                  </Link>
                  <p className='font-normal text-gray-700 dark:text-gray-400 mt-auto'>
                    {blog.postDate}
                  </p>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </BasicLayout>
  )
}