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 PostsGridViewSlider from '../blog/postsGridViewSlider';
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>

            <div className="flex w-full justify-end">
              <Button
                link={routes.blog.route()}
                endIcon="showMore"
                className="mt-5"
              >
                {t('com_home_blog_show_more')}
              </Button>
            </div>
          </div>
        </div>

        <div className="mt-10">
          <PostsGridViewSlider
            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>
  );
}