import { Smile } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import type { ReactNode } from 'react';

type Props = {
    title: string;
    eyebrow?: string;
    description?: ReactNode;
    icon?: LucideIcon;
};

export default function AuthHeading({
    title,
    eyebrow,
    description,
    icon: Icon = Smile,
}: Props) {
    return (
        <div className="flex flex-col items-center text-center">
            <span className="flex size-11 items-center justify-center rounded-lg border border-navy/10 bg-gray-100 dark:border-white/10 dark:bg-ink-soft">
                <Icon className="size-6" strokeWidth={2.25} />
            </span>
            {eyebrow && (
                <p className="mt-4 text-sm text-gray-500 dark:text-white/60">
                    {eyebrow}
                </p>
            )}
            <h1
                className={`text-2xl font-semibold ${eyebrow ? 'mt-1' : 'mt-4'}`}
            >
                {title}
            </h1>
            {description && (
                <p className="mt-2 text-sm text-gray-500 dark:text-white/60">
                    {description}
                </p>
            )}
        </div>
    );
}