'use client';

import { FormationObject } from '@/app/Types/FormationType';
import FormationSettings from '@/app/components/FormationSpecific/FormationSettings';
import PlayerInstructions from '@/app/components/FormationSpecific/PlayerInstructions';
import { fifaFormationsDb } from '@/app/layout';
import { Stack, Typography } from '@mui/material';
import { doc, getDoc } from 'firebase/firestore';

interface PageProps {
    data: FormationObject;
    error?: string;
}

export default function Page({ data, error }: PageProps) {
    if (error || !data) {
        return <Typography>Error: {error || 'Not found'}</Typography>;
    }

    return (
        <Stack spacing={2} alignItems={'center'}>
            <FormationSettings formation={data} />
            <PlayerInstructions formation={data} />
        </Stack>
    );
}

export async function getServerSideProps(context: any) {
    const formationId = context.params.formationId;
    console.log(formationId);
    try {
        const docRef = doc(fifaFormationsDb, 'formations', formationId);
        const docSnap = await getDoc(docRef);
        return { data: docSnap.data() as FormationObject };
    } catch (error: any) {
        console.error(error.message);
        return { error: error.message };
    }
}

export default async function Page() {
  const res = await fetch('https://api.example.com/...')
  const data = await res.json()
  return <main></main>
}