shoc-frontend-new/src/app/(auth)/_components/auth-card-header.tsx

import type { ComponentPropsWithoutRef } from "react";

import { Text } from "@/components/ui/text";
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}>
      <Text variant="title" className="m-0 text-center font-bold text-foreground">
        {title}
      </Text>
      <Text
        variant="description"
        tone="muted"
        when={Boolean(subtitle)}
        className="mb-6! mt-1.5! text-center font-normal"
      >
        {subtitle}
      </Text>
    </div>
  );
}