const schema = {
  username: z
    .string()
    .min(3, 'Please input email')
    .max(30, 'Please input correct email')
    .email('Please input correct email'),
  password: z.string().min(6, 'Please input password'),
};

const validator = (key: keyof typeof schema) => (value: string) => {
  const res = schema[key].safeParse(value);
  console.log(res);
  return !res.success && res.error.issues[0].message || null;
};
const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.stopPropagation();
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const value = {
      username: formData.get('username'),
      password: formData.get('password'),
    };
    console.log(value);
    return value;
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <form onSubmit={onSubmit} className="grid gap-4 grid-cols-1 grid-rows-2">
        <Input
          name="username"
          autoComplete="email"
          required
          autoFocus
          label="Email"
          placeholder="Input your email"
          variant="bordered"
          defaultValue=""
          validate={validator('username')}
        />
        <Input
          name="password"
          label="Password"
          placeholder="Input your password"
          type="password"
          variant="bordered"
          defaultValue=""
          validate={validator('password')}
        />
        <div className="inline-flex items-start justify-between self-start gap-4 mb-4">
          <Button color="primary" type="submit">
            Sign in
          </Button>
        </div>
      </form>
    </main>
  );