import Link from 'next/link'
import { formatDate, getBlogPosts } from '@/blog/utils'

export function BlogPosts() {
  let allBlogs = getBlogPosts().sort((a, b) => {
    if (
      new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)
    ) {
      return -1
    }
    return 1
  })

  return (
    <>
      <section>
        <div className="skew skew-top mr-for-radius">
          <svg className="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
            <polygon fill="currentColor" points="0 0 10 10 0 10" />
          </svg>
        </div>
        <div className="skew skew-top ml-for-radius">
          <svg className="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
            <polygon fill="currentColor" points="0 10 10 0 10 10" />
          </svg>
        </div>
        <div className="py-20 bg-gray-50 radius-for-skewed">
          <div className="container mx-auto px-4">
            <div className="mb-16 flex flex-wrap items-center">
              <div className="w-full lg:w-1/2">
                <span className="text-green-600 font-bold">Nos dernières actualités !</span>
                <h2 className="text-4xl lg:text-5xl font-bold font-heading">Postes proposés</h2>
              </div>
              {/* <div className="hidden lg:block text-right w-1/2"><a className="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-gray-50 font-bold leading-loose transition duration-200" href="#">View More Articles</a></div> */}
            </div>
            <div className="flex flex-wrap -mx-3">
              {/* <div className="mb-8 lg:mb-0 w-full lg:w-1/4 px-3">
                <div className="py-4 px-6 bg-white shadow rounded">
                  <h4 className="mb-4 text-gray-500 font-bold uppercase">Topics</h4>
                  <ul>
                    <li><a className="block py-2 px-3 mb-4 rounded text-green-600 font-bold bg-gray-50" href="#">Tous</a></li>
                    <li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Community</a></li>
                    <li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Design</a></li>
                    <li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Engineering</a></li>
                    <li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Marketplace</a></li>
                    <li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">News</a></li>
                    <li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Culture</a></li>
                    <li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Product Updates</a></li>
                    <li><a className="block py-2 px-3 mb-4 rounded hover:text-green-600 hover:bg-gray-50" href="#">Trust &amp; Security</a></li>
                  </ul>
                </div>
              </div> */}
              <div className="w-full lg:w-3/4 px-3">
                {allBlogs.map((post) => (
                  <div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
                    <div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
                      <img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1552338804-c42590cb7b88?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80" alt="" />
                    </div>
                    <div className="w-full lg:w-3/4 px-3">
                      <Link key={post.slug} className="hover:underline" href={`/blog/${post.slug}`}>
                        <h3 className="mb-1 text-2xl font-bold font-heading">{post.metadata.title}</h3>
                      </Link>
                      <div className="mb-2 flex items-center text-sm">
                        {/* <a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a> */}
                        {/* <span className="text-gray-400 mx-2">•</span> */}
                        <span className="text-gray-400">{formatDate(post.metadata.publishedAt, false)}</span>
                      </div>
                      <p className="text-gray-500">{post.metadata.description}</p>
                    </div>
                  </div>
                ))}
                {/* <div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
                  <div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
                    <img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1552338804-c42590cb7b88?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80" alt="" />
                  </div>
                  <div className="w-full lg:w-3/4 px-3">
                    <a className="hover:underline" href="#">
                      <h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
                    </a>
                    <div className="mb-2 flex items-center text-sm">
                      <a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
                      <span className="text-gray-400 mx-2">•</span>
                      <span className="text-gray-400">24 Jan, 2021</span>
                    </div>
                    <p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
                  </div>
                </div>
                <div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
                  <div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
                    <img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1578509395623-a34c97f15379?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=968&q=80" alt="" />
                  </div>
                  <div className="w-full lg:w-3/4 px-3">
                    <a className="hover:underline" href="#">
                      <h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
                    </a>
                    <div className="mb-2 flex items-center text-sm">
                      <a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
                      <span className="text-gray-400 mx-2">•</span>
                      <span className="text-gray-400">24 Jan, 2021</span>
                    </div>
                    <p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
                  </div>
                </div>
                <div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
                  <div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
                    <img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1551008475-4533d141425b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=968&q=80" alt="" />
                  </div>
                  <div className="w-full lg:w-3/4 px-3">
                    <a className="hover:underline" href="#">
                      <h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
                    </a>
                    <div className="mb-2 flex items-center text-sm">
                      <a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
                      <span className="text-gray-400 mx-2">•</span>
                      <span className="text-gray-400">24 Jan, 2021</span>
                    </div>
                    <p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
                  </div>
                </div>
                <div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
                  <div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
                    <img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/37/IHLjdHdzSvi0rgUMMlSK_TE3_0286.jpg?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1191&q=80" alt="" />
                  </div>
                  <div className="w-full lg:w-3/4 px-3">
                    <a className="hover:underline" href="#">
                      <h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
                    </a>
                    <div className="mb-2 flex items-center text-sm">
                      <a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
                      <span className="text-gray-400 mx-2">•</span>
                      <span className="text-gray-400">24 Jan, 2021</span>
                    </div>
                    <p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
                  </div>
                </div>
                <div className="flex flex-wrap -mx-3 mb-8 lg:mb-6">
                  <div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
                    <img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1552338804-c42590cb7b88?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80" alt="" />
                  </div>
                  <div className="w-full lg:w-3/4 px-3">
                    <a className="hover:underline" href="#">
                      <h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
                    </a>
                    <div className="mb-2 flex items-center text-sm">
                      <a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
                      <span className="text-gray-400 mx-2">•</span>
                      <span className="text-gray-400">24 Jan, 2021</span>
                    </div>
                    <p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
                  </div>
                </div> */}
                {/* <div className="flex flex-wrap -mx-3">
                  <div className="mb-4 lg:mb-0 w-full lg:w-1/4 px-3">
                    <img className="w-full h-full object-cover rounded" src="https://images.unsplash.com/photo-1578509395623-a34c97f15379?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=968&q=80" alt="" />
                  </div>
                  <div className="w-full lg:w-3/4 px-3">
                    <a className="hover:underline" href="#">
                      <h3 className="mb-1 text-2xl font-bold font-heading">Morbi scelerisque nulla et lectus dignissim eleifend nulla eu nulla a metus</h3>
                    </a>
                    <div className="mb-2 flex items-center text-sm">
                      <a className="text-green-600 hover:underline hover:text-green-700" href="#">John Doe</a>
                      <span className="text-gray-400 mx-2">•</span>
                      <span className="text-gray-400">24 Jan, 2021</span>
                    </div>
                    <p className="text-gray-500">Quisque id sagittis turpis. Nulla sollicitudin rutrum eros eu dictum...</p>
                  </div>
                </div> */}
              </div>
            </div>
          </div>
        </div>
        <div className="skew skew-bottom mr-for-radius">
          <svg className="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
            <polygon fill="currentColor" points="0 0 10 0 0 10" />
          </svg>
        </div>
        <div className="skew skew-bottom ml-for-radius">
          <svg className="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
            <polygon fill="currentColor" points="0 0 10 0 10 10" />
          </svg>
        </div>
      </section>
      {/* <div>
        {allBlogs
          .sort((a, b) => {
            if (
              new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)
            ) {
              return -1
            }
            return 1
          })
          .map((post) => (
            <Link
              key={post.slug}
              className="flex flex-col space-y-1 mb-4"
              href={`/blog/${post.slug}`}
            >
              <div className="w-full flex flex-col md:flex-row space-x-0 md:space-x-2">
                <p className="text-neutral-600 dark:text-neutral-400 w-[100px] tabular-nums">
                  {formatDate(post.metadata.publishedAt, false)}
                </p>
                <p className="text-neutral-900 dark:text-neutral-100 tracking-tight">
                  {post.metadata.title}
                </p>
              </div>
            </Link>
          ))}
      </div> */}

    </>
  )
}