import * as React from "react";

export function AuthCard({ title, description, children, footer }: { title: string; description?: React.ReactNode; children: React.ReactNode; footer?: React.ReactNode }) {
  return (
    <div className="rounded-xl border border-border bg-bg-elevated p-6 shadow-md sm:p-8">
      <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
      {description ? <p className="mt-1.5 text-[13.5px] leading-relaxed text-fg-muted">{description}</p> : null}
      <div className="mt-6">{children}</div>
      {footer ? <div className="mt-6 border-t border-border pt-5 text-center text-[13px] text-fg-muted">{footer}</div> : null}
    </div>
  );
}