import Link from 'next/link';
import { requestPasswordReset } from '../actions';

export default function ForgotPasswordPage({ searchParams }: { searchParams: { sent?: string } }) {
  const sent = searchParams.sent === '1';

  return (
    <div className="mx-auto max-w-md px-6 py-16">
      <h1 className="font-display text-3xl">Reset your password</h1>

      {sent ? (
        <p className="mt-6 border border-line bg-surface px-4 py-3 text-sm">
          If that email has an account, we&apos;ve sent a link to reset the password. It expires in 1 hour.
        </p>
      ) : (
        <>
          <p className="mt-2 text-sm text-muted">
            Enter your email and we&apos;ll send you a link to reset your password.
          </p>
          <form action={requestPasswordReset} className="mt-8 space-y-6">
            <div>
              <label htmlFor="email" className="tag-label mb-2 block">
                Email
              </label>
              <input
                id="email"
                name="email"
                type="email"
                required
                className="w-full border border-line px-3 py-2 text-sm"
              />
            </div>
            <button type="submit" className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark">
              Send reset link
            </button>
          </form>
        </>
      )}

      <p className="mt-6 text-sm">
        <Link href="/account/login" className="text-clay hover:text-clay-dark">
          Back to log in
        </Link>
      </p>
    </div>
  );
}