import type { ComponentPropsWithoutRef } from "react";

import { cn } from "@/lib/utils";

export type AuthCardHeaderProps = ComponentPropsWithoutRef<"div"> & {
  title: string;
  subtitle?: string;
};

export function AuthCardHeader({ title, subtitle, className, ...props }: AuthCardHeaderProps) {
  return (
    <div className={cn(className)} {...props}>
      <h2 className="m-0 text-center font-display font-bold text-foreground">{title}</h2>
      {subtitle && (
        <p className="mb-6! mt-1.5! text-center font-sans font-normal text-muted-foreground">
          {subtitle}
        </p>
      )}
    </div>
  );
}