import { AuthCard, Button, ErrorSummary, Form, FormSubmitButton, FormTextField } from "@rdloom/react";

<div className="h-full w-full">
  <AuthCard
    brand={<span className="text-lg font-semibold tracking-tight text-[var(--rd-color-text-default)]">rdloom</span>}
    title="Sign in to your account"
    description="Welcome back. Enter your details to continue."
    socialProviders={
      <Button variant="secondary" className="w-full">
        Continue with single sign-on
      </Button>
    }
    footer={
      <>
        <a href="/forgot-password" className={link}>
          Forgot your password?
        </a>
        <p>
          New here?{" "}
          <a href="/sign-up" className={link}>
            Create an account
          </a>
        </p>
      </>
    }
  >
    <Form
      className="flex flex-col gap-4"
      defaultValues={{ email: "", password: "" }}
      onSubmit={async (values) => {
        await new Promise((resolve) => setTimeout(resolve, 600));
        return values.password === "wrong" ? { formError: "The email or password is not right. Check them and try again." } : undefined;
      }}
    >
      <ErrorSummary title="We could not sign you in" />
      <FormTextField
        name="email"
        label="Email"
        type="email"
        autoComplete="email"
        placeholder="you@company.com"
        isRequired
        validate={(v) => (v && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? "Enter an email address like name@company.com." : null)}
      />
      <FormTextField name="password" label="Password" type="password" autoComplete="current-password" isRequired />
      <FormSubmitButton className="w-full">Sign in</FormSubmitButton>
    </Form>
  </AuthCard>
</div>