"use client"

import { Sparkles } from "lucide-react"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
} from "@/components/ui/card"
import { cn } from "@/lib/utils"

const LOGIN_CARD_CLASS = cn(
  "w-full gap-4 border-0 bg-transparent px-4 py-6 shadow-none",
  "sm:gap-5 sm:rounded-none sm:px-8 sm:py-8",
  "sm:text-card-foreground sm:dark:text-mail-text sm:shadow-none"
)

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

export function LoginForm({ loginHref, signupHref, error }: LoginFormProps) {
  return (
    <div className="flex flex-1 flex-col items-center justify-center px-4">
      <div className="ultimail-login-card-frame mx-auto w-full max-w-sm">
        <Card className={LOGIN_CARD_CLASS}>
          <CardHeader className="gap-4 px-0 text-center sm:px-0">
            <div className="flex flex-col items-center gap-3 py-4">
              <img
                src="/ultisuite-mark.svg"
                alt=""
                width={72}
                height={72}
                draggable={false}
                className="h-16 w-16 select-none"
                aria-hidden
              />
              <span className="text-2xl font-bold tracking-tight">
                Ulti<span className="landing-gradient-text">Suite</span>
              </span>
            </div>
            <CardDescription>
              Connecte-toi avec ton compte UltiSpace pour accéder à ta suite.
            </CardDescription>
            {error ? (
              <p className="text-sm text-destructive" role="alert">
                {decodeURIComponent(error)}
              </p>
            ) : null}
          </CardHeader>

          <CardContent className="flex justify-center px-0 sm:px-0">
            <div className="ultimail-login-connect-border">
              <a href={loginHref} className="ultimail-login-connect-btn">
                <Sparkles className="size-4 shrink-0" strokeWidth={2} aria-hidden />
                Se connecter avec UltiSpace
              </a>
            </div>
          </CardContent>

          <CardFooter className="px-0 sm:px-0">
            <p className="w-full text-center text-sm text-muted-foreground">
              Pas encore de compte ?{" "}
              <a
                className="font-medium text-primary underline"
                href={signupHref}
                suppressHydrationWarning
              >
                Créer un compte
              </a>
            </p>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}