import SectionTitle from '@/components/layout/sectionTitle';
import { getTranslations } from 'next-intl/server';
import { TLocales } from '@/models/layout';
import { getProjects } from '@/services/projects';
import { IProjectCardProps } from '../project/project';
import ProjectsGrid from '../project/ProjectGrid';
interface Props {
  locale: TLocales;
}
export default async function HomePageProjects({ locale }: Props) {
  const t = await getTranslations({ locale });
  const projects: IProjectCardProps[] = await getProjects();
  return (
    <div className="w-full">
      <div
        className={`relative w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28 max-lg:pt-6`}
      >
        <div className="relative z-20 container mx-auto 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')}
          />
          <h4 className="pt-10 text-base font-extralight tracking-normal max-lg:hidden">
            {t('com_home_projects_description')}
          </h4>
        </div>

        <ProjectsGrid projects={projects?.slice(-4)} />
      </div>
    </div>
  );
}
