import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { resetPassword } from "@/actions/password-reset";
import { ContentCard } from "@/components/public/ui";

export default async function ResetPage({
  searchParams,
}: {
  searchParams: Promise<{ email?: string; token?: string; error?: string }>;
}) {
  const t = await getTranslations("pages.reset");
  const { email = "", token = "", error } = await searchParams;

  return (
    <main style={{ maxWidth: 420, margin: "2rem auto" }}>
      <ContentCard icon="🔐" title={t("title")} subtitle={t("subtitle")}>
        <form action={resetPassword} style={{ display: "grid", gap: "0.7rem" }}>
          <input type="hidden" name="email" value={email} />
          <input type="hidden" name="token" value={token} />
          <input
            name="password"
            type="password"
            placeholder={t("passwordPlaceholder")}
            autoComplete="new-password"
            required
          />
          <button type="submit" className="btn btn-primary">
            {t("resetPassword")}
          </button>
        </form>
        {error ? (
          <p style={{ color: "var(--color-danger)", textAlign: "center", marginBottom: 0 }}>{error}</p>
        ) : null}
        <p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
          <Link href="/login">{t("backToLogin")}</Link>
        </p>
      </ContentCard>
    </main>
  );
}