import {
  Box,
  Container,
  Flex,
  Select,
  useBreakpointValue,
  VStack,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";

export function Page(pageProps: { [p: string]: any }) {
  const isDesktop = useBreakpointValue({ base: false, lg: true });
  const entryTypes = [];

  for (const type of pageProps.entry_types)
    entryTypes.push(<option value={type.value}>{type.name}</option>)

  useEffect(() => {
    (async function () {
      const queueRequest = await fetch("/api/mod-queue")
    })();
  }, []);

  return (
    <Container maxW="container.xl">
      <Flex>
        <VStack>

        </VStack>
        <Box display={ isDesktop ? undefined : "none" } w="250px">
          <Select placeholder="Entry Type">
            <option value="">All</option>
            {entryTypes}
          </Select>
        </Box>
      </Flex>
    </Container>
  );
}
export const title = "Mod Queue - Car Crushers";