import type {Metadata} from 'next';
import {getTranslations} from 'next-intl/server';
import {DemoBrowser} from '@/components/DemoBrowser';
import {SectionHeader} from '@/components/SectionHeader';
import {orderedDemos} from '@/config/content';

export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations('metadata');

  return {
    title: t('demosPageTitle'),
    description: t('demosPageDescription')
  };
}

export default async function DemosPage() {
  const t = await getTranslations('demosPage');

  return (
    <main>
      <section className="sectionBand sectionBand--light demosPage">
        <div className="container demosContainer">
          <SectionHeader title={t('title')} description={t('description')} />
          <DemoBrowser demos={orderedDemos} />
        </div>
      </section>
    </main>
  );
}
