import React from 'react';
import type {Metadata} from 'next';
import {Col, Container, Row} from 'react-bootstrap';
import {FaCar} from 'react-icons/fa';
import initTranslations from '@/i18n';
import CovoituragesBoard from '@/components/community/CovoituragesBoard';
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?.Carpool?.page_title ?? 'Covoiturage')};
}

/** Covoiturage (spec L194-L200) : les annonces des événements à venir, réponse et correction par les membres. */
export default async function Page({params}: RouteProps) {
  const {locale} = await params;
  const {messages} = await initTranslations({locale});
  const t = (messages?.Carpool ?? {}) as Record<string, string>;

  return (
    <section className="tk-section tk-bg-light tk-covoiturage-page">
      <Container>
        <Row className="justify-content-center">
          <Col lg={9}>
            <div className="tk-section-head mb-4" data-ghost="Kenveajoù">
              <div>
                <h1 className="tk-proposition__title">
                  <FaCar className="me-2" aria-hidden="true" />
                  {t.page_title ?? 'Covoiturage'}
                </h1>
                <p className="tk-proposition__lead">{t.page_intro}</p>
              </div>
            </div>
            <CovoituragesBoard locale={locale} />
          </Col>
        </Row>
      </Container>
    </section>
  );
}