import NixOSLogo from '@/assets/nixos.svg?react';
import { Button } from '@/components/ui/button';
import {
  Field,
  FieldGroup,
  FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';

export function LoginForm({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div className={cn('flex flex-col gap-6', className)} {...props}>
      <form>
        <FieldGroup>
          <div className="flex flex-col items-center gap-2 text-center">
            <a
              href="#"
              className="flex flex-col items-center gap-2 font-medium"
            >
              <div className="flex size-8 items-center justify-center rounded-md">
                <NixOSLogo className="size-6" />
              </div>
              <span className="sr-only">Nix CN Meetup #2</span>
            </a>
            <h1 className="text-xl font-bold">欢迎来到 Nix CN Meetup #2</h1>
          </div>
          <Field>
            <FieldLabel htmlFor="email">参会登记Email</FieldLabel>
            <Input
              id="email"
              type="email"
              placeholder="edolstra@gmail.com"
              required
            />
          </Field>
          <Field>
            <Button type="submit">发送登录链接</Button>
          </Field>
        </FieldGroup>
      </form>
    </div>
  );
}