// import { blog } from '@konobangu/cms';
// import { Feed } from '@konobangu/cms/components/feed';
import { Image } from '@konobangu/cms/components/image';
import { cn } from '@konobangu/design-system/lib/utils';
import type { Blog, WithContext } from '@konobangu/seo/json-ld';
import { JsonLd } from '@konobangu/seo/json-ld';
import { createMetadata } from '@konobangu/seo/metadata';
import type { Metadata } from 'next';
import { draftMode } from 'next/headers';
import Link from 'next/link';

const title = 'Blog';
const description = 'Thoughts, ideas, and opinions.';

export const metadata: Metadata = createMetadata({ title, description });

const BlogIndex = async () => {
  const draft = await draftMode();

  const jsonLd: WithContext<Blog> = {
    '@type': 'Blog',
    '@context': 'https://schema.org',
  };

  return (
    <>
      <JsonLd code={jsonLd} />
      <div className="w-full py-20 lg:py-40">
        <div className="container mx-auto flex flex-col gap-14">
          <div className="flex w-full flex-col gap-8 sm:flex-row sm:items-center sm:justify-between">
            <h4 className="max-w-xl font-regular text-3xl tracking-tighter md:text-5xl">
              Latest articles
            </h4>
          </div>
          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
            {/* <Feed queries={[blog.postsQuery]} draft={draft.isEnabled}>
              {async ([data]) => {
                'use server';

                if (!data.blog.posts.items.length) {
                  return null;
                }

                return data.blog.posts.items.map((post, index) => (
                  <Link
                    href={`/blog/${post._slug}`}
                    className={cn(
                      'flex cursor-pointer flex-col gap-4 hover:opacity-75',
                      !index && 'md:col-span-2'
                    )}
                    key={post._slug}
                  >
                    <Image
                      src={post.image.url}
                      alt={post.image.alt ?? ''}
                      width={post.image.width}
                      height={post.image.height}
                    />
                    <div className="flex flex-row items-center gap-4">
                      <p className="text-muted-foreground text-sm">
                        {new Date(post.date).toLocaleDateString('en-US', {
                          month: 'long',
                          day: 'numeric',
                          year: 'numeric',
                        })}
                      </p>
                    </div>
                    <div className="flex flex-col gap-2">
                      <h3 className="max-w-3xl text-4xl tracking-tight">
                        {post._title}
                      </h3>
                      <p className="max-w-3xl text-base text-muted-foreground">
                        {post.description}
                      </p>
                    </div>
                  </Link>
                ));
              }}
            </Feed> */}
          </div>
        </div>
      </div>
    </>
  );
};

export default BlogIndex;