import SectionTitle from '@/components/layout/sectionTitle';
import { getTranslations } from 'next-intl/server';
import { TLocales } from '@/models/layout';
import { getProjects } from '@/services/projects';
import ProjectsGrid from '../project/ProjectGrid';
import Button from '@/components/uikit/button';
import routeFactory from '@/assets/constants/routeFactory';
import ProjectsGridView from '../project/projectGridView';
import ProjectsGridSlider from '../project/projectsGridSlider';
interface Props {
  locale: TLocales;
}
export default async function HomePageProjects({ locale }: Props) {
  const t = await getTranslations({ locale });
  const projects = await getProjects();

  const routes = routeFactory(t, locale);
  return (
    <div className="w-full">
      <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_projects_title')}
            description={t('com_home_projects_title')}
            description_bold={t('com_home_projects_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_projects_description')}
            </h4>
            <Button
              link={routes.projects.route()}
              endIcon="showMore"
              className="mt-5"
            >
              {t('com_home_projects_show_more')}
            </Button>
          </div>
        </div>
        <div className="mt-10">
          <ProjectsGridSlider
            projects={projects.data?.slice(0, 3)}
            locale={locale}
          />
        </div>

        <Button
          link={routes.projects.route()}
          endIcon="showMore"
          className="mx-auto mt-5 lg:hidden"
        >
          {t('com_home_projects_show_more')}
        </Button>
      </div>
    </div>
  );
}