'use client';

import { Image } from '@akinon/next/components';
import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
import { useLocalization } from '@akinon/next/hooks';
import { WidgetResultType } from '@akinon/next/types';
import { LoaderSpinner } from '@theme/components';
import { formatDateToMonthYear } from '@theme/utils/formatDate';

interface BlogImageData {
  value: string;
  data_type: 'image';
  url: string;
}

interface BlogItemValue {
  link: string;
  image: string;
  title: string;
  description: string;
  date: string;
}

interface BlogItemKwargs {
  value: {
    image: BlogImageData;
  };
  data_type: 'nested';
}

interface BlogItem {
  value: BlogItemValue;
  kwargs: BlogItemKwargs;
}

interface BlogListAttributes {
  blogs: BlogItem[];
}

export default function BlogList() {
  const { locale, t } = useLocalization();
  const { data, isLoading } = useGetWidgetQuery('blog-list') as ReturnType<
    typeof useGetWidgetQuery
  >;
  const blogData = data as WidgetResultType<BlogListAttributes> | undefined;

  if (isLoading) {
    return (
      <div className="py-20">
        <LoaderSpinner />
      </div>
    );
  }

  if (!blogData) {
    return (
      <div className="container mx-auto py-10">
        <p className="text-center py-20">{t('blog.no_blog_posts')}</p>
      </div>
    );
  }

  return (
    <div>
      <div className="container px-3 lg:px-0 py-4 lg:py-10">
        {blogData.attributes?.blogs?.length ? (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5 ">
            {blogData.attributes.blogs.map((blogItem, index) => (
              <div
                key={index}
                className={
                  `bg-[#fafafa]` + (index === 0 ? ' lg:col-span-2' : '')
                }
              >
                <a
                  key={index}
                  href={blogItem.value.link}
                  className="block group"
                >
                  <div className="w-full relative mb-4 overflow-hidden">
                    <Image
                      src={blogItem.kwargs.value.image.url}
                      alt={blogItem.value.title}
                      aspectRatio={index === 0 ? 1072 / 481 : 530 / 440}
                      fill
                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                      className="w-full h-full object-cover  transition-transform duration-300 hidden lg:block"
                    />
                    <Image
                      src={blogItem.kwargs.value.image.url}
                      alt={blogItem.value.title}
                      aspectRatio={350 / 278}
                      fill
                      sizes="100vw"
                      className="w-full h-full object-fill  transition-transform duration-300 lg:hidden"
                    />
                  </div>
                  <div
                    className={
                      `p-6 ` +
                      (index === 0
                        ? 'lg:p-0 lg:pb-10 lg:max-w-[700px] lg:mx-auto lg:text-center'
                        : '')
                    }
                  >
                    <h3 className="text-2xl mb-1 text-[#121212] leading-[1.72] tracking-[0.64px]">
                      {blogItem.value.title}
                    </h3>
                    <p className="mb-4 lg:mb-1">
                      {formatDateToMonthYear(
                        blogItem.value.date,
                        locale as any
                      )}
                    </p>
                    <p className="text-[#121212] leading-[1.72] tracking-[0.64px]">
                      {blogItem.value.description}
                    </p>
                  </div>
                </a>
              </div>
            ))}
          </div>
        ) : (
          <p>{t('blog.no_blog_posts')}</p>
        )}
      </div>
    </div>
  );
}