import SectionTitle from '@/components/layout/sectionTitle';
import { getTranslations } from 'next-intl/server';
import { TLocales } from '@/models/layout';
import Button from '@/components/uikit/button';
import routeFactory from '@/assets/constants/routeFactory';
import { getPosts } from '@/services/blog';
import PostsGridView from '../blog/PostsGridView';
interface Props {
  locale: TLocales;
  className?: string;
}
export default async function HomePageBlog({ locale, className }: Props) {
  const t = await getTranslations({ locale });
  const posts = await getPosts();

  const routes = routeFactory(t, locale);
  return (
    <div className={`w-full ${className}`}>
      <div className="relative container mx-auto w-full bg-white">
        <div className="relative z-20 grid grid-cols-1 lg:grid-cols-2 lg:gap-28">
          <SectionTitle
            title={t('pages_blog_title')}
            description={t('com_home_blog_title')}
            description_bold={t('com_home_blog_title_bold')}
            locale={locale}
          />
          <div className="pt-10 max-lg:hidden">
            <h4 className="text-base font-extralight tracking-normal max-lg:hidden">
              {t('com_home_blog_description')}
            </h4>
            <Button
              link={routes.blog.route()}
              endIcon="showMore"
              className="mt-5"
            >
              {t('com_home_blog_show_more')}
            </Button>
          </div>
        </div>

        <div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8">
          <PostsGridView posts={posts.data?.slice(0, 3)} locale={locale} />
        </div>
        <Button
          link={routes.blog.route()}
          endIcon="showMore"
          className="mx-auto mt-10 lg:hidden"
        >
          {t('com_home_blog_show_more')}
        </Button>
      </div>
    </div>
  );
}
