'use client';

import { me } from '@/api/auth';
import React, { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useRecoilState } from 'recoil';
import { userState } from '@/state/auth';
import { Card, Container, Grid, SimpleGrid } from '@mantine/core';

export default function Page() {
  const [user, setUser] = useRecoilState(userState);
  const router = useRouter();

  useEffect(() => {
    if (!user) {
      me().then((response) => {
        if (response) {
          setUser(response.user);
        } else {
          router.push('/');
        }
      });
    }
  }, [user]);

  if (user) {
    return (
      <Container mt={'2rem'}>
        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing={'md'}>
          <Card withBorder radius='md' padding='xl'>
            <Card.Section p={'1rem'}>
              <h2>
                {user.first_name} {user.last_name}
              </h2>
              {user.role}
            </Card.Section>
          </Card>
          <Grid gutter={'md'}>
            <Grid.Col>
              <Card withBorder radius='md' padding='xl'>
                <Card.Section p={'1rem'}>test</Card.Section>
              </Card>
            </Grid.Col>
            <Grid.Col>
              <Card withBorder radius='md' padding='xl'>
                <Card.Section p={'1rem'}>test</Card.Section>
              </Card>
            </Grid.Col>
          </Grid>
        </SimpleGrid>
      </Container>
    );
  } else {
    return <></>;
  }
}
