import {
  Button,
  Container,
  Heading,
  HStack,
  Radio,
  RadioGroup,
  Text,
  Textarea,
} from "@chakra-ui/react";
import { useState } from "react";

export default function () {
  const [showCookieBox, setShowCookieBox] = useState(false);
  return (
    <Container maxW="container.md">
      <Heading pt="36px">Let's get started</Heading>
      <Text pt="128px">
        Are you able to log in to the account you are transferring from?
      </Text>
      <RadioGroup onChange={(val) => setShowCookieBox(JSON.parse(val))}>
        <HStack>
          <Radio value="false">No</Radio>
          <Radio value="true">Yes</Radio>
        </HStack>
      </RadioGroup>
      <Textarea
        id="cookie-box"
        placeholder="Paste your .ROBLOSECURITY cookie here"
        pt="16px"
        style={{ display: showCookieBox ? "initial" : "unset" }}
      />
      <Button pt="32px">Continue</Button>
    </Container>
  );
}