"use client";

import { Button } from "@aur-ui/ui/components/button";
import { Input } from "@aur-ui/ui/components/input";
import { AuthShell } from "@aur-ui/ui/patterns/auth-shell";
import { Field } from "@aur-ui/ui/patterns/form-field";
import type { FormEvent } from "react";
import { useState } from "react";

export default function AuthShellDemo() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("sign in", { email, password });
  };

  return (
    <AuthShell
      footnote={
        <>
          Don&apos;t have an account?{" "}
          <span className="text-brand">Sign up</span>
        </>
      }
    >
      <div className="w-full rounded-panel bg-surface p-6 shadow-elevated">
        <div className="mb-6 flex flex-col gap-1 text-center">
          <h1 className="text-2xl font-bold tracking-tight text-ink-900">
            Welcome back
          </h1>
          <p className="text-sm text-ink-500">Sign in to continue.</p>
        </div>
        <form className="flex flex-col gap-5" onSubmit={onSubmit}>
          <Field label="Email" htmlFor="auth-email" required>
            <Input
              id="auth-email"
              type="email"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </Field>
          <Field label="Password" htmlFor="auth-password" required>
            <Input
              id="auth-password"
              type="password"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </Field>
          <Button type="submit" className="w-full">
            Sign in
          </Button>
        </form>
      </div>
    </AuthShell>
  );
}