import React from 'react';
import type {Metadata} from 'next';
import {Col, Container, Row} from 'react-bootstrap';
import {FaBullhorn} from 'react-icons/fa';
import initTranslations from '@/i18n';
import AnnoncesBoard from '@/components/community/AnnoncesBoard';
import {documentTitle} from '@/utils/documentTitle';

export const dynamic = 'force-dynamic';

type RouteProps = {params: Promise<{locale: string}>};

export async function generateMetadata({params}: RouteProps): Promise<Metadata> {
  const {locale} = await params;
  const {messages} = await initTranslations({locale});
  return {title: documentTitle(messages?.Annonces?.title ?? 'Petites annonces')};
}

/** Petites annonces de la communauté (spec L187-L193). */
export default async function Page({params}: RouteProps) {
  const {locale} = await params;
  const {messages} = await initTranslations({locale});
  const t = (messages?.Annonces ?? {}) as Record<string, string>;

  return (
    <section className="tk-section tk-bg-light tk-annonces-page">
      <Container>
        <Row className="justify-content-center">
          <Col lg={9}>
            <div className="tk-section-head mb-4" data-ghost="Kemennoù">
              <div>
                <h1 className="tk-proposition__title">
                  <FaBullhorn className="me-2" aria-hidden="true" />
                  {t.title ?? 'Petites annonces'}
                </h1>
                <p className="tk-proposition__lead">{t.intro}</p>
              </div>
            </div>
            <AnnoncesBoard locale={locale} />
          </Col>
        </Row>
      </Container>
    </section>
  );
}