"use client";

import Image from "next/image";
import Link from "next/link";

interface AuthFormWrapperProps {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

export function AuthFormWrapper({
  title,
  subtitle,
  children,
  footer,
}: AuthFormWrapperProps) {
  return (
    <div className="flex flex-col gap-8">
      {/* Mobile logo — hidden on desktop since it's in the side panel */}
      <div className="lg:hidden flex items-center gap-2.5">
        <Link href="/" className="flex items-center gap-2.5">
          <Image
            src="/logo.png"
            alt="honeyDue"
            width={32}
            height={32}
            className="rounded-lg"
          />
          <span className="font-heading text-xl font-bold text-foreground">
            honeyDue
          </span>
        </Link>
      </div>

      {/* Header */}
      <div>
        <h1 className="font-heading text-2xl font-bold tracking-tight text-foreground">
          {title}
        </h1>
        {subtitle && (
          <p className="mt-1.5 text-sm text-muted-foreground">{subtitle}</p>
        )}
      </div>

      {/* Form content */}
      <div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
        {children}
      </div>

      {/* Footer */}
      {footer && (
        <div className="text-center text-sm text-muted-foreground">
          {footer}
        </div>
      )}
    </div>
  );
}
