Forgot Password

"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { ArrowLeft, Mail } from "lucide-react";

interface AuthForgotPasswordProps {
  brandName?: string;
  title?: string;
  subtitle?: string;
  loginUrl?: string;
}

const ease: [number, number, number, number] = [0.16, 1, 0.3, 1];

export default function AuthForgotPassword({
  brandName = "Acme",
  title = "Mot de passe oublie ?",
  subtitle = "",
  loginUrl = "#",
}: AuthForgotPasswordProps) {
  const [sent, setSent] = useState(false);

  return (
    <section className="min-h-screen flex items-center justify-center py-16 px-6" style={{ background: "var(--color-background)" }}>
      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, ease }} className="w-full max-w-sm">
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-10 h-10 rounded-lg text-sm font-bold mb-4" style={{ background: "var(--color-accent)", color: "var(--color-background)" }}>
            {brandName.charAt(0)}
          </div>
          <h1 className="text-2xl font-bold" style={{ color: "var(--color-foreground)" }}>{title}</h1>
          {subtitle && <p className="mt-2 text-sm" style={{ color: "var(--color-foreground-muted)" }}>{subtitle}</p>}
        </div>

        {sent ? (
          <div className="text-center py-8">
            <div className="inline-flex items-center justify-center w-14 h-14 rounded-full mb-4" style={{ background: "var(--color-background-alt)" }}>
              <Mail size={24} style={{ color: "var(--color-accent)" }} />
            </div>
            <p className="text-base font-semibold" style={{ color: "var(--color-foreground)" }}>Email envoye !</p>
            <p className="mt-2 text-sm" style={{ color: "var(--color-foreground-muted)" }}>Verifiez votre boite de reception et suivez les instructions.</p>
          </div>
        ) : (
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} className="flex flex-col gap-4">
            <input type="email" placeholder="Votre adresse email" required className="w-full px-4 py-3 rounded-lg text-sm outline-none" style={{ background: "var(--color-background-alt)", color: "var(--color-foreground)", border: "1px solid var(--color-border)" }} />
            <button type="submit" className="w-full py-3 rounded-lg text-sm font-semibold transition-opacity hover:opacity-90" style={{ background: "var(--color-accent)", color: "var(--color-background)" }}>
              Envoyer le lien
            </button>
          </form>
        )}

        <a href={loginUrl} className="mt-6 flex items-center justify-center gap-2 text-sm hover:opacity-70 transition-opacity" style={{ color: "var(--color-foreground-muted)" }}>
          <ArrowLeft size={14} /> Retour a la connexion
        </a>
      </motion.div>
    </section>
  );
}