import { ReactNode } from "react";
import { Link } from "react-router-dom";

interface SignupContainerProps {
  children: ReactNode;
  title: string;
  description: string;
  isInvitedUser?: boolean;
  hideLoginLink?: boolean;
}

export function SignupContainer({ children, title, description, isInvitedUser, hideLoginLink }: SignupContainerProps) {
  return (
    <div className="flex min-h-[calc(100vh-5rem)] items-center justify-center bg-background px-4 py-12">
      <div className="surface-card w-full max-w-lg p-6 sm:p-9">
        <div className="text-center mb-8">
          <img src="/logo-light.svg" alt="TripTales" width="176" height="44" className="mx-auto mb-7 h-11 w-auto" />
          <h1 className="text-3xl font-bold">{title}</h1>
          <p className="mt-2 text-muted-foreground">{description}</p>
        </div>
        {children}
        {!hideLoginLink && (
          <div className="mt-6 text-center">
            <p className="text-muted-foreground">
              {isInvitedUser
                ? "Vous avez déjà un mot de passe ? "
                : "Vous avez déjà un compte ? "}
              <Link to="/login" className="font-semibold text-primary hover:underline">
                Se connecter
              </Link>
            </p>
          </div>
        )}
      </div>
    </div>
  );
}