Fullscreen Dialog

"use client";

import React from "react";
import { IconButton } from "@/subframe/components/IconButton";
import { Alert } from "@/subframe/components/Alert";
import { TextField } from "@/subframe/components/TextField";
import { RadioCardGroup } from "@/subframe/components/RadioCardGroup";
import { CheckboxCard } from "@/subframe/components/CheckboxCard";
import { Button } from "@/subframe/components/Button";
import { FullscreenDialog } from "@/subframe/components/FullscreenDialog";

function FullscreenDialogExample() {
  return (
    <FullscreenDialog open={false} onOpenChange={(open: boolean) => {}}>
      <div className="flex w-full items-center justify-between border-b border-solid border-neutral-border px-4 py-4">
        <img
          className="h-8 w-8 flex-none object-cover"
          src="https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png"
        />
        <span className="text-body-bold font-body-bold text-default-font">
          New Account
        </span>
        <IconButton
          icon="FeatherX"
          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
        />
      </div>
      <div className="container max-w-none flex w-full grow shrink-0 basis-0 flex-col items-center gap-12 overflow-hidden py-12 overflow-auto">
        <div className="flex w-full max-w-[384px] grow shrink-0 basis-0 flex-col items-center gap-6">
          <Alert
            variant="brand"
            title="New account transfers earn extra"
            description="Get a bonus when you move your funds over"
          />
          <TextField
            className="h-auto w-full flex-none"
            label="Name"
            helpText=""
          >
            <TextField.Input
              placeholder="Your name"
              value=""
              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}}
            />
          </TextField>
          <TextField
            className="h-auto w-full flex-none"
            label="Account Number"
            helpText=""
          >
            <TextField.Input
              placeholder="###-#######"
              value=""
              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}}
            />
          </TextField>
          <TextField
            className="h-auto w-full flex-none"
            label="Routing Number"
            helpText=""
          >
            <TextField.Input
              placeholder="###-#######"
              value=""
              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}}
            />
          </TextField>
          <div className="flex w-full flex-col items-start gap-2">
            <span className="text-body-bold font-body-bold text-default-font">
              Account Type
            </span>
            <RadioCardGroup
              className="h-auto w-full flex-none"
              value=""
              onValueChange={(value: string) => {}}
            >
              <div className="flex grow shrink-0 basis-0 flex-wrap items-start gap-2">
                <RadioCardGroup.RadioCard
                  disabled={false}
                  hideRadio={false}
                  value="9f2e7373"
                >
                  <div className="flex flex-col items-start">
                    <span className="w-full text-body-bold font-body-bold text-default-font">
                      Checking
                    </span>
                  </div>
                </RadioCardGroup.RadioCard>
                <RadioCardGroup.RadioCard
                  disabled={false}
                  hideRadio={false}
                  value="5fd534ec"
                >
                  <div className="flex flex-col items-start">
                    <span className="w-full text-body-bold font-body-bold text-default-font">
                      Savings
                    </span>
                  </div>
                </RadioCardGroup.RadioCard>
              </div>
            </RadioCardGroup>
          </div>
          <div className="flex w-full flex-col items-start gap-2">
            <span className="text-body-bold font-body-bold text-default-font">
              Transfer Requirements
            </span>
            <CheckboxCard
              className="h-auto w-full flex-none"
              checked={false}
              onCheckedChange={(checked: boolean) => {}}
            >
              <span className="text-body-bold font-body-bold text-default-font">
                I&#39;m transferring a retirement account
              </span>
            </CheckboxCard>
            <CheckboxCard
              className="h-auto w-full flex-none"
              checked={false}
              onCheckedChange={(checked: boolean) => {}}
            >
              <span className="text-body-bold font-body-bold text-default-font">
                I&#39;m a US citizen or pernament resident
              </span>
            </CheckboxCard>
            <CheckboxCard
              className="h-auto w-full flex-none"
              checked={false}
              onCheckedChange={(checked: boolean) => {}}
            >
              <span className="text-body-bold font-body-bold text-default-font">
                I&#39;ve held assets in this account for &gt; 1 year
              </span>
            </CheckboxCard>
          </div>
        </div>
      </div>
      <div className="flex w-full items-center justify-between border-t border-solid border-neutral-border px-4 py-4">
        <Button
          variant="neutral-secondary"
          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
        >
          Cancel
        </Button>
        <Button onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}>
          Save
        </Button>
      </div>
    </FullscreenDialog>
  );
}

export default FullscreenDialogExample;