import { GetServerSideProps } from 'next';
import React from 'react';
import { CommitteeProps } from '../src/model/components/committee';
import Layout from '../src/components/layout/Layout';
import CommitteePage from '../src/components/pages/committee/CommitteePage';
import CommitteeMobile from '../src/components/pages/committee/CommitteePageMobile';
import getCommittees from '../src/utils/api/getCommittees';
import getRings from '../src/utils/api/getRings';

const committee: React.FC<CommitteeProps> = ({ rings, committeeMembers }) => (
  <Layout title="Comité Dialímpico">
    <CommitteePage rings={rings} committeeMembers={committeeMembers} />
    <CommitteeMobile rings={rings} committeeMembers={committeeMembers} />
  </Layout>
);

export const getServerSideProps: GetServerSideProps<CommitteeProps> =
  async () => {
    const committeeMembers = await getCommittees();
    const rings = await getRings();

    return {
      props: {
        committeeMembers,
        rings: rings.sort((ant, act) => ant.order - act.order),
      },
    };
  };

export default committee;