import { changePassword } from './actions'

export default async function ChangePasswordPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>
}) {
  const { error } = await searchParams

  return (
    <main>
      <h1>Set a new password</h1>
      <p style={{ color: '#666', marginTop: '-1rem', marginBottom: '1.5rem' }}>
        Choose a password you&apos;ll use from now on.
      </p>
      <form action={changePassword}>
        {error && <p className="error">{error}</p>}
        <label>
          New password
          <input
            name="password"
            type="password"
            autoComplete="new-password"
            minLength={8}
            required
            autoFocus
          />
        </label>
        <label>
          Confirm new password
          <input
            name="confirm"
            type="password"
            autoComplete="new-password"
            minLength={8}
            required
          />
        </label>
        <button type="submit">Save password</button>
      </form>
    </main>
  )
}