import { getTranslations } from 'next-intl/server';
import { Container } from '@/components/ui/container';
import { ProjectCard } from '@/components/cards/project-card';
import { Reveal } from '@/components/ui/reveal';
import { getPublishedProjects } from '@/lib/queries';
import { buildMetadata } from '@/lib/seo';
import type { Locale } from '@/i18n/config';

export async function generateMetadata({ params: { locale } }: { params: { locale: Locale } }) {
  const t = await getTranslations({ locale, namespace: 'nav' });
  return buildMetadata({
    locale,
    path: '/projects',
    title: t('projects'),
    description:
      locale === 'ar' ? 'مشاريعنا في مجال الطاقة الشمسية.' : 'Nos réalisations dans le domaine solaire.'
  });
}

export default async function ProjectsPage({ params: { locale } }: { params: { locale: Locale } }) {
  const projects = await getPublishedProjects(locale);

  return (
    <Container className="py-16">
      <Reveal variant="up">
        <h1 className="font-display text-3xl font-semibold">
          {locale === 'ar' ? 'مشاريعنا' : 'Nos réalisations'}
        </h1>
      </Reveal>
      <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {projects.map((p, i) => (
          <ProjectCard key={p.slug} project={p} locale={locale} delay={i * 90} />
        ))}
      </div>
      {projects.length === 0 && (
        <p className="mt-8 text-graphite-900/50">
          {locale === 'ar' ? 'لا توجد مشاريع منشورة بعد.' : 'Aucune réalisation publiée pour le moment.'}
        </p>
      )}
    </Container>
  );
}