import { Button, Card, Container, Heading, VStack } from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react";

export async function loader({ context }: { context: RequestContext }) {
  return context.env.ROBLOX_OAUTH_CLIENT_ID;
}

export default function () {
  return (
    <Container pt="16vh">
      <Card borderRadius="32px" p="4vh">
        <VStack alignContent="center" gap="2vh">
          <Heading>Verify your new Roblox account</Heading>
          <br />
          <Button
            as="a"
            borderRadius="24px"
            colorScheme="blue"
            href={`https://apis.roblox.com/oauth/v1/authorize?client_id=${useLoaderData<
              typeof loader
            >()}&redirect_uri=${encodeURIComponent(
              `${location.protocol}//${location.host}/api/data-transfers/verify`,
            )}&response_type=code&scope=openid%20profile`}
          >
            Verify
          </Button>
        </VStack>
      </Card>
    </Container>
  );
}