Login Centered

"use client";

import { motion } from "framer-motion";

interface AuthLoginCenteredProps {
  brandName?: string;
  title?: string;
  subtitle?: string;
  showSocial?: boolean;
  showRemember?: boolean;
  forgotPasswordUrl?: string;
  registerUrl?: string;
}

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

export default function AuthLoginCentered({
  brandName = "Acme",
  title = "Connexion",
  subtitle = "",
  showSocial = true,
  showRemember = true,
  forgotPasswordUrl = "#",
  registerUrl = "#",
}: AuthLoginCenteredProps) {
  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"
      >
        {/* Brand */}
        <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>

        {/* Social buttons */}
        {showSocial && (
          <>
            <div className="flex gap-3 mb-6">
              <button
                className="flex-1 py-2.5 rounded-lg text-sm font-medium transition-opacity hover:opacity-80"
                style={{
                  border: "1px solid var(--color-border)",
                  color: "var(--color-foreground)",
                }}
              >
                Google
              </button>
              <button
                className="flex-1 py-2.5 rounded-lg text-sm font-medium transition-opacity hover:opacity-80"
                style={{
                  border: "1px solid var(--color-border)",
                  color: "var(--color-foreground)",
                }}
              >
                GitHub
              </button>
            </div>
            <div className="flex items-center gap-3 mb-6">
              <div
                className="flex-1 h-px"
                style={{ background: "var(--color-border)" }}
              />
              <span
                className="text-xs"
                style={{ color: "var(--color-foreground-light)" }}
              >
                ou
              </span>
              <div
                className="flex-1 h-px"
                style={{ background: "var(--color-border)" }}
              />
            </div>
          </>
        )}

        {/* Form */}
        <form
          onSubmit={(e) => e.preventDefault()}
          className="flex flex-col gap-4"
        >
          <div>
            <label
              className="block mb-1.5 text-xs font-medium"
              style={{ color: "var(--color-foreground-muted)" }}
            >
              Email
            </label>
            <input
              type="email"
              placeholder="vous@email.com"
              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)",
              }}
            />
          </div>
          <div>
            <label
              className="block mb-1.5 text-xs font-medium"
              style={{ color: "var(--color-foreground-muted)" }}
            >
              Mot de passe
            </label>
            <input
              type="password"
              placeholder="••••••••"
              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)",
              }}
            />
          </div>

          {/* Remember / Forgot */}
          <div className="flex items-center justify-between">
            {showRemember && (
              <label className="flex items-center gap-2 text-sm" style={{ color: "var(--color-foreground-muted)" }}>
                <input type="checkbox" className="rounded" />
                Se souvenir
              </label>
            )}
            <a
              href={forgotPasswordUrl}
              className="text-sm hover:opacity-70 transition-opacity"
              style={{ color: "var(--color-accent)" }}
            >
              Mot de passe oublie ?
            </a>
          </div>

          <button
            type="submit"
            className="w-full py-3 rounded-lg text-sm font-semibold transition-opacity hover:opacity-90 mt-2"
            style={{
              background: "var(--color-accent)",
              color: "var(--color-background)",
            }}
          >
            Se connecter
          </button>
        </form>

        {/* Register link */}
        <p
          className="mt-6 text-center text-sm"
          style={{ color: "var(--color-foreground-muted)" }}
        >
          Pas encore de compte ?{" "}
          <a
            href={registerUrl}
            className="font-medium hover:opacity-70 transition-opacity"
            style={{ color: "var(--color-accent)" }}
          >
            S&apos;inscrire
          </a>
        </p>
      </motion.div>
    </section>
  );
}