"use client"

import { Sparkles } from "lucide-react"
import { AuthCard } from "@/components/auth/auth-card"
import { AuthConnectButton } from "@/components/auth/auth-connect-button"

type LoginFormProps = {
  loginHref: string
  signupHref: string
  forgotPasswordHref: string
  error: string | null
}

export function LoginForm({
  loginHref,
  signupHref,
  forgotPasswordHref,
  error,
}: LoginFormProps) {
  return (
    <AuthCard
      description="Connecte-toi avec ton compte UltiSpace pour accéder à ta suite."
      error={error ? decodeURIComponent(error) : null}
      footer={
        <div className="flex w-full flex-col gap-3 text-center text-sm text-muted-foreground">
          <p>
            Pas encore de compte ?{" "}
            <a className="font-medium text-primary underline" href={signupHref}>
              Créer un compte
            </a>
          </p>
          <p>
            <a className="font-medium text-primary underline" href={forgotPasswordHref}>
              Mot de passe oublié ?
            </a>
          </p>
        </div>
      }
    >
      <AuthConnectButton href={loginHref}>
        <Sparkles className="size-4 shrink-0" strokeWidth={2} aria-hidden />
        Se connecter avec UltiSpace
      </AuthConnectButton>
    </AuthCard>
  )
}